为什么我的表单提交两次？答案

【问题标题】：Why is my form submitting twice?为什么我的表单提交两次？
【发布时间】：2012-03-07 23:49:51
【问题描述】：

所以由于某种原因，我的表单只需按下一个按钮就提交了两次。这是我第一次使用 jquery Form 插件，我想 jquery 提交一次，并且表单也是“自然”提交的。我已经看到补救措施是在表单的 onSubmit 事件处理程序上附加一个“return false”。我以为我正在这样做，但显然它不起作用。

谁能帮忙？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>User form entry </title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.validate.js"></script>
<script src="jquery.passwordStrength.js"></script>
<script src="jquery.form.js"></script>
<script>

$(document).ready(function() {
    $('#signupForm').ajaxForm(function() { 
         var queryString = $('#signupForm').formSerialize(); 
         $.post('process.php', queryString);
    });
});
</script>
</head>
<body>
   <form id="signupForm" action="process.php" onsubmit="return false" method="post">
   <fieldset class="password">
          ... form goes here
   <button type="submit" name="formSubmit" value="submit">Click to submit</button>
   </form>

<div id="results"></div>

</body>
</html>

我尝试将 onsubmit="return false" 添加到表单元素，但是我根本没有提交。我也尝试过添加“return false;”到 jQuery，但我仍然有双重提交。我错过了什么？根据 jQuery Form Plugin 网站，这似乎是标准方法。我的表单有何不同？

（顺便说一下，我说的不是重复按下按钮连续提交多个表单的问题。我的问题是“一个提交按钮按下=两个提交”。）

【问题讨论】：

你的表单提交也是没有js的吗？
我遇到了同样的问题，表单被提交了两次。

标签： php jquery forms jquery-forms-plugin double-submit-problem

【解决方案1】：

$('#signupForm').ajaxForm(function() { 
            var queryString = $('#signupForm').formSerialize(); 
            $.post('process.php', queryString);

});

这是提交两次......ajaxForm 方法一次，然后post() 第二次

ajaxForm 方法为您处理表单汇总...您不需要添加post() 方法...ajaxForm 内部的函数是一个回调，在成功时执行...

$('#signupForm').ajaxForm(function() { 
       alert("Thank you for your comment!"); 
});

此代码将在成功发布后显示警报...这里的简单示例 -> http://jquery.malsup.com/form/

您还应该从表单中删除onsubmit 属性...

更新

如果你想显示结果...这样做：

$(document).ready(function() { 
    $('#signupForm').ajaxForm({ target: '#results' }); 
    // this will output the responseText from the submitted form to the target DOM element
});

【讨论】：

我按照你说的方式调用 ajaxForm，但我仍然收到双重职位。一个区别是我在提交中进行文件上传。第一次调用上传处理程序时，HttpPostedFileBase 是正确的，第二次调用时，HttpPostedFileBase 什么都没有。我可以很容易地解决这个问题，但我宁愿不必这样做。

【解决方案2】：

避免使用

<button type="submit" name="formSubmit" value="submit">

所以很自然，您的提交按钮将执行一次提交，而您的 jquery 将执行另一次提交

使用这个

<input type="button" name="formSubmit" value="submit">

【讨论】：

如果你绑定到表单的onsubmit（并返回false），那么使用提交按钮就可以了。
当我使用按钮而不是提交时，表单根本不会提交。绑定到表单的 onsubmit 并返回 false 并不能缓解双重发布问题。
为什么要避免使用 type="submit"？

【解决方案3】：

试试这个：

onsubmit="void(0);"

【讨论】：

他返回的是假的。这完全阻止了事件的传播。这段代码什么都不做，上面的代码将提交表单。发送表单两次是因为有人在这里回答了 $.post 电话。

【解决方案4】：

不要使用submit 按钮。使用常规按钮。

【讨论】：

如果你绑定到表单的onsubmit（并返回false），那么使用提交按钮就可以了。
有不止一种方法可以做到这一点。我的建议完全有效。
使用常规按钮根本不会提交表单。绑定到表单的 onSubmit 并返回 false 并不能缓解双重发布问题。