Question

我们说我的表格如下：

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

我的问题是如何显示提交的表格＆＃34;在我使用jQuery单击ADD按钮后？
这是我尝试过的（我使用的是Jquery 1.11.1）：

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

我写得对吗？或者其他任何写作方式？

Answer 1

<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();

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

Answer 2

试试这段代码：

JS：

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

    });
});

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

Answer 3

为按钮分配点击处理程序

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

Answer 4

试试这个

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

Answer 5

#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;
  });
});

DEMO

Answer 6

你也可以这样做。

<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();

Answer 7

执行此操作的一种方法是在表单中添加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>

Answer 8

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

Answer 9

如果您想使用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，这取决于你的要求

Answer 10

提交表单时发生onsubmit事件。

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

请注意，要取消提交事件，onSubmit的格式应为onSubmit="return expression"。 return表示应将表达式的值返回给提交例程。如果表达式的计算结果为false，则取消提交例程;如果是，则提交例程继续进行。

<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

单击提交按钮后，Jquery显示警报

10 个答案: