Javascript 单击提交按钮后,jQuery 显示警报

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/33819127/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 15:31:13  来源:igfitidea点击:

Jquery show alert after click submit button

javascriptphpjqueryhtml

提问by KKL Michael

Let's say I have a form like following:

假设我有一个如下所示的表格:

<form name="add" method="post" action="add.php?action=add" enctype="multipart/form-data">
...
<input type="submit" name="add" id="add" value="ADD">
</form>

My question is how do I show the "Form submitted" after I click ADD button using jQuery?
Here is what I have tried (I'm using Jquery 1.11.1):

我的问题是如何在使用 jQuery 单击添加按钮后显示“已提交的表单”?
这是我尝试过的(我使用的是 Jquery 1.11.1):

<script>
$(document).ready(function(){
    $("#add").submit(function(){
        alert("Form submitted");
    });
});
</script>

Am I write correct? Or any other ways to write it?

我写的对吗?或者有什么其他的写法?

回答by guradio

<form name="add" method="post" action="add.php?action=add" enctype="multipart/form-data">
...
<input type="submit" name="add" id="add" value="ADD">
</form>

your input type is submit it will automatically submit the form you can change this type to button

您的输入类型是提交它会自动提交您可以将此类型更改为的表单 button

<input type="button" name="add" id="add" value="ADD">

and change

和改变

$(document).ready(function(){
    $("#add").submit(function(){
        alert("Form submitted");
    });
});

to

$(document).ready(function() {
    $("#add").submit(function(e) {
        e.preventDefault();
        alert("Form submitted");
    });
});

event.preventDefault();

event.preventDefault();

Description: If this method is called, the default action of the event will not be triggered.

说明:如果调用该方法,则不会触发事件的默认动作。

回答by Jhon Carpenter

Try this code:

试试这个代码:

Js:

JS:

$(document).ready(function(){
    $("form").on('submit',function(e){
        alert("Form submitted");
        return false;

    });
});

JSFiddle Link: https://jsfiddle.net/Dee0565/dn28Lze1/1/

JSFiddle 链接:https://jsfiddle.net/Dee0565/dn28Lze1/1/

回答by Rizwan

If you want to submit the form using ajax and then you want to show the alert message that "form is submitted successfully"

如果您想使用ajax提交表单,然后您想显示“表单提交成功”的警报消息

then you can use this code

那么你可以使用这个代码

// this is the id of the form

// 这是表单的id

$("#add").submit(function(e) {

$("#add").submit(function(e) {

var url = "add.php"; // Your PHP page.

$.ajax({
       type: "POST",
       url: url,
       data: $("#add").serialize(), // serializes the form's elements.
       success: function(data)
       {
           alert(data); // show response from the php script.
       }
     });

e.preventDefault(); // avoid to execute the actual submit of the form.

});

});

you can also use JSON it depends on your requirement

您也可以使用 JSON,这取决于您的要求

回答by AkshayP

Theonsubmitevent occurs when a form is submitted.

onsubmit事件在提交表单时发生。

onSubmitis a scripting event that occurs when the user attempts to submit the form to the CGI. onSubmit can be used to do some error checking on the form data, and to cancel the submit if an error is found.

onSubmit是当用户尝试将表单提交给 CGI 时发生的脚本事件。onSubmit 可用于对表单数据进行一些错误检查,并在发现错误时取消提交。

Note that in order to cancel the submit event, the onSubmit should be in the form onSubmit="return expression". returnindicates that the value of the expression should be returned to the submit routine. If the expression evaluates to false, the submit routine is cancelled; if it is true, the submit routine goes forward.

请注意,为了取消提交事件, onSubmit 应采用 形式onSubmit="return expression"return表示应将表达式的值返回给提交例程。如果表达式的计算结果为假,则提交例程被取消;如果为真,则提交例程继续进行。

<form onsubmit="myFunction()">
  Enter name: <input type="text">
  <input type="submit">
</form>
<script>
function myFunction() {
    alert("The form was submitted");
}
</script>

Working Example For Reference

参考工作示例

回答by Ramanlfc

assign a click handler to the button

为按钮分配一个点击处理程序

  $(document).ready(function(){
        $("#add").click(function(){
            alert("Form submitted");
        });
    });

回答by PHP Team

Try this

尝试这个

<script>
$(document).ready(function(){
    $('#add').on('submit', function(e){
        e.preventDefault();
        alert("Form submitted");
    });
});
</script>

回答by Norlihazmey Ghazali

#addid should attach on form, not the submit button. See below :

#addid 应该附加在 上form,而不是submit button. 见下文 :

Remove id from input :

从输入中删除 id :

<input type="submit" name="add" value="ADD">

And add to form :

并添加到表单:

<form name="add" id="add" method="post" action="add.php?action=add" enctype="multipart/form-data">

And of course with the current script you had, after click ok button it will redirect into form action, just in case you wanna stay on that page without reloading, you must prevent the behavior of form from being like a normal form does by returning falseor use jquery .preventDefault()like so:

当然,对于您拥有的当前脚本,单击“确定”按钮后,它将重定向到表单操作,以防万一您想留在该页面而不重新加载,您必须防止表单的行为像正常表单那样通过returning false或使用jquery.preventDefault()像这样:

$(document).ready(function(){
  $('#add').on('submit', function(e){
    e.preventDefault();
    alert("Form submitted");
    // or return false;
  });
});

DEMO

演示

回答by Shameem Ahmed

You can also do like this.

你也可以这样做。

<script>
$(document).ready(function(){
   $("#add").on('click', function(e){
       e.preventDefault();
       var form = $(".add");
       form.submit();
       alert("Form submitted");
    });
});
</script>

When you have the form in a variable we can perform other queries as well, such as we can use ifcondition or we can serialize the form var form = $(".add").serialize();

当您在变量中有表单时,我们也可以执行其他查询,例如我们可以使用if条件或我们可以序列化表单var form = $(".add").serialize();

回答by Ltaylor

One way to do this is add an onclick method to your form to initiate the javascript containing the alert.

一种方法是在表单中添加一个 onclick 方法以启动包含警报的 javascript。

<script type = "text/javascript"> 
function showMessage() {
alert ("Form submitted");
return true;
}
</script>
<form name="add" method="post" action="add.php?action=add" 
enctype="multipart/form-data" onclick = "return showMessage()" />
<input type="submit" name="add" id="add" value="ADD"> </form>

回答by Miko

Let's just add an id attribute for your form and use the id for the submit event, try this:

让我们为您的表单添加一个 id 属性并使用该 id 进行提交事件,试试这个:

<!DOCTYPE html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>

<body>


<form id="frm_add" name="add" method="post" action="add.php?action=add" enctype="multipart/form-data">
...
<input type="submit" name="add" id="add" value="ADD">
</form>

<script>
$(document).ready(function(){
    $("#frm_add").submit(function(){
        alert("Form submitted");

    });
});
</script>

</body>
</html>