jquery：提交表单两次答案

【问题标题】：jquery : submitting a form twicejquery：提交表单两次
【发布时间】：2012-03-19 09:40:01
【问题描述】：

我正在为客户举办的活动创建注册表单。基本的用户详细信息会提交到第三方系统（即姓名、电子邮件等），但其余字段需要通过电子邮件发送给客户端。

我需要这样的事情发生：

列表项
用户填写表格
jquery bvalidator 检查表单中的必填字段
表单被提交（通过 ajax）到一个单独的页面，电子邮件发送给客户
然后将表单提交（常规 POST 方法）到第三方系统
成功后，用户将返回到“谢谢”网址。

这是我尝试使用的代码，但它陷入了循环，反复将自身提交到“电子邮件”页面，并且从不提交到外部 url。

如果我将$('#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;
});

关于如何解决此问题的任何建议？

【问题讨论】：

标签： jquery

【解决方案1】：

试试：


$('#form1').unbind('submit').submit();

【讨论】：

【解决方案2】：

尝试在成功时取消绑定提交事件：通过调用 unbind 调用 ajax 的方法

$('#form1').unbind('submit'); 
$('#form1')[0].submit(); // call native submit

http://api.jquery.com/unbind/

【讨论】：

解除绑定肯定是要走的路:)

【解决方案3】：

您可以使用 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;

});

【讨论】：

【解决方案4】：

嗯，我不确定我是否理解。你总是提交到 email_send.asp，所以每次成功都会提交，因此很清楚为什么你会陷入循环。

如果我没听错的话，第二次提交应该是到另一个具有不同成功处理程序的 url，对吧？

因此，您可以编写一个基本的 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
          }            
        });
      }
    });
  }    
});

编辑这是根据您的评论更新的答案：

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

【讨论】：

是的，这就是我最初尝试做的（2个单独的ajax帖子），但是将数据提交到第三方系统对我不起作用......它可能已经提交了数据但没有返回“成功”...这就是为什么我决定通过 ajax 提交一次表单以发送电子邮件，然后第二次以常规方式提交表单...
哦，好吧，但是您确实意识到第二次提交将与以前一样？我会为你更新我的答案！
感谢更新...“解除绑定”功能是关键:)

【解决方案5】：

您可以使用 jquery.form 插件通过 ajax 提交表单。结帐以下网址： http://jquery.malsup.com/form/

然后在你的 js 脚本中尝试这样的事情

var myvalidator = $('#form1').bValidator(optionsGrey);

$('#form1').submit(function(){
    if(myvalidator.isValid()){
      $(this).unbind('submit').submit();

});

【讨论】：

【解决方案6】：

您有理由必须使用submit-方法吗？它进入无限循环的原因是它再次调用了相同的提交事件监听器。

如果没有，您可以将两个 ajax 提交排队，一个到电子邮件页面，然后再到客户端。

最后，您可以取消绑定事件侦听器。一个鲜为人知的解除绑定事件监听器的方法是将事件对象传递给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;
});

【讨论】：

【解决方案7】：

这是一个示例代码，可以将表单两次提交到不同的 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>

【讨论】：

【解决方案8】：

我也遇到了同样的问题。然后我注意到我不小心链接了我的自定义 javascript 文件两次，所以表单被两个脚本提交了两次。通过删除页面的一个脚本链接表单页脚解决了该问题。

<script src="<?php echo base_path; ?>/js/custom.js"></script>
<script src="<?php echo base_path; ?>/js/custom.js"></script>

【讨论】：