jquery：提交表单两次
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9767871/
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
jquery : submitting a form twice
提问by Dog
I'm creating a registration form for a client for an event they're hosting. The basic user details are submitted to a third-party system (ie name, email etc.) but the rest of the fields need to be sent via email to the client.
我正在为他们举办的活动的客户创建注册表。基本用户详细信息提交给第三方系统（即姓名、电子邮件等），但其余字段需要通过电子邮件发送给客户。
I need something like this to happen :
我需要这样的事情发生：
- List item
- user fills out form
- jquery bvalidator checks the form for required fields
- form is submitted (via ajax) to a seperate page where an email is sent to client
- form is then submitted (regular POST method) to third-party system
- on success user is passed back to a 'thank you' url.
- 项目清单
- 用户填写表格
- jquery bvalidator 检查表单中的必填字段
- 表单被提交（通过ajax）到一个单独的页面，在那里向客户端发送电子邮件
- 然后将表单（常规 POST 方法）提交给第三方系统
- 成功时，用户将被传递回“谢谢”网址。
Here is the code I've tried using, but it gets caught in a loop repeatedly submitting itself to the 'email' page, and never submits to the external url.
这是我尝试使用的代码，但它陷入循环中，反复将自身提交到“电子邮件”页面，并且从不提交到外部 url。
If I replace the $('#form1').submit();with an alert it submits only once to the email page and then displays the alert correctly.
如果我用$('#form1').submit();警报替换它，它只会向电子邮件页面提交一次，然后正确显示警报。
var myvalidator = $('#form1').bValidator(optionsGrey);
$('#form1').submit(function() {
if (myvalidator.isValid()) {
$.ajax({
data: $('#form1').serialize(),
type: "POST",
url: "email_send.asp",
success: function() {
$('#form1').submit();
}
});
}
return false;
});
Any suggestions as to how I can fix this?
关于如何解决这个问题的任何建议？
回答by Sudhir Bastakoti
Try:
尝试：
$('#form1').unbind('submit').submit();
回答by Andreas Wong
try unbinding submit event on your success: method of your ajax call by calling unbind
尝试在成功时解除绑定提交事件：通过调用 unbind 调用 ajax 的方法
$('#form1').unbind('submit');
$('#form1')[0].submit(); // call native submit
回答by diolemo
You can use unbind() to revert to the default behaviour.
您可以使用 unbind() 恢复到默认行为。
var myvalidator = $('#form1').bValidator(optionsGrey);
$('#form1').submit(function() {
if(myvalidator.isValid()) {
$.ajax({
data: $('#form1').serialize(),
type: "POST",
url: "email_send.asp",
success: function(){
$('#form1').unbind('submit');
$('#form1').submit();
}
});
}
return false;
});
回答by tbleckert
Hm I'm not sure I understand. You are always submitting to email_send.asp so and on every success it does so, therefore it seems pretty clear why you get stuck in a loop.
嗯，我不确定我是否理解。您总是向 email_send.asp 提交，因此每次成功时它都会提交，因此您陷入循环的原因似乎很清楚。
If I understand you right, the second submit should be to another url with a different success handler, right?
如果我理解正确，第二次提交应该是到另一个具有不同成功处理程序的 url，对吗？
So, instead of submitting the form again you could just write a basic ajax function:
因此，您无需再次提交表单，只需编写一个基本的 ajax 函数即可：
$('#form1').submit(function () {
if (myvalidator.isValid()) {
$.ajax({
data: $('#form1').serialize(),
type: "POST",
url: "email_send.asp",
success: function(){
$.ajax({
data: $('#form1').serialize(),
type: 'POST',
url: 'third_party.asp',
success: function () {
//display thank you message
}
});
}
});
}
});
EDITHere's a updated answer according to your comment:
编辑这是根据您的评论更新的答案：
var myvalidator = $('#form1').bValidator(optionsGrey);
$('#form1').submit(function(){
if(myvalidator.isValid()){
$.ajax({
data: $('#form1').serialize(),
type: "POST",
url: "email_send.asp",
success: function(){
$('#form1').unbind('submit').submit();
}
});
}
return false;
});
回答by PatrikAkerstrand
Do you have a reason to have to utilize the submit-method? The reason it enter an infinite loop is because it invokes the same submit event listener again.
你有理由必须使用submit- 方法吗？它进入无限循环的原因是因为它再次调用相同的提交事件侦听器。
If not, you can just queue two ajax-submits, one to the e-mail page, and again to the client.
如果没有，您可以将两个 ajax 提交排队，一个到电子邮件页面，另一个到客户端。
Finally, you can unbind the event listener. A little known way to unbind an event listener is to pass in the event object to the unbind-call. This will unbind only the current event listener:
最后，您可以解除绑定事件侦听器。取消绑定事件侦听器的一种鲜为人知的方法是将事件对象传递给unbind-call。这将仅解除绑定当前事件侦听器：
$('#form1').submit(function(e){
if(myvalidator.isValid()){
$form = $('#form1');
$.ajax({
data: $form.serialize(),
type: "POST",
url: "email_send.asp",
success: function(){
$form.unbind(e).submit();
}
});
}
return false;
});
回答by Mouli Kalakota
Here is an example code of submitting form twice to different URLs without redirection. Click on "Test" button twice.
这是将表单两次提交到不同 URL 而不重定向的示例代码。单击“测试”按钮两次。
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#testBtn").click(function() {
$("#form").submit();
$("#form").submit(function() {
$("#form").attr("action", "download");
});
});
});
</script>
</head>
<body>
<form id="form" enctype="multipart/form-data" method="post"
action="upload" target="myIFrame">
<input type="hidden" name="FileName" />
<input type="file" name="FileDialog" size="100" />
<input type="submit" /> <input name="txt" type="text" />
</form>
<input id="testBtn" type="button" value="Test" />
<iframe style="display: none;" src="javascript:''" id="myIFrame">
<html>
<head></head>
<body></body>
</html>
</iframe>
</body>
</html>
回答by Muhammad Sannan Khalid
You can use jquery.form plugin for submitting form via ajax. Checkout following url: http://jquery.malsup.com/form/
您可以使用 jquery.form 插件通过 ajax 提交表单。结帐以下网址：http: //jquery.malsup.com/form/
Then in your js script try something like this
然后在你的 js 脚本中尝试这样的事情
var myvalidator = $('#form1').bValidator(optionsGrey);
$('#form1').submit(function(){
if(myvalidator.isValid()){
$(this).unbind('submit').submit();
});
回答by Soulat Toqeer
I was facing the same problem. Then I noticed that I had accidentally linked my custom javascript file twice so the form was being submitted twice by two scripts. The problem was solved by removing one script link form footer of the page.
我面临同样的问题。然后我注意到我不小心链接了我的自定义 javascript 文件两次，因此表单被两个脚本提交了两次。通过删除页面的一个脚本链接表单页脚解决了该问题。
<script src="<?php echo base_path; ?>/js/custom.js"></script>
<script src="<?php echo base_path; ?>/js/custom.js"></script>
