Jquery在点击提交按钮后显示警报

Jquery show alert after click submit button

本文关键字：显示 按钮 提交 Jquery      更新时间：2023-09-26

假设我有一个如下所示的形式：

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

我的问题是，在使用jQuery单击"添加"按钮后，如何显示"表单已提交"？
这是我尝试过的(我使用的是Jquery 1.11.1(：

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

我写得对吗？还是其他写法？

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

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

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

和改变

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

自

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

event.preventDefault((;

说明：如果调用此方法，则不会触发事件的默认操作。

试试这段代码：

Js：

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

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

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

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

试试这个 

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

#add id 应该附加到form上，而不是submit button上。见下文 ：

从输入中删除 id ：

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

并添加到表单：

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

当然，对于您当前的脚本，单击确定按钮后，它将重定向到表单操作，以防万一您想留在该页面上而不重新加载，您必须通过returning false或使用 jquery .preventDefault()来防止表单的行为像普通表单一样，如下所示：

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

演示

你也可以

这样做。

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

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

一种方法是向表单添加一个 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>

让我们为您的表单添加一个 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>

如果要使用 ajax 提交表单，然后希望显示"表单已成功提交"的警报消息

然后你可以使用此代码

这是表单的 ID

$("#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.

}(;

您也可以根据您的要求使用 JSON

提交表单时发生onsubmit事件。

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

请注意，为了取消提交事件，onSubmit 应采用 onSubmit="return expression" 的形式。 return指示表达式的值应返回到提交例程。如果表达式的计算结果为 false，则取消提交例程;如果为 true，则提交例程将继续。

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

工作示例供参考

相关文章：