jQuery：停止提交表单，执行脚本，继续提交表单？答案

【问题标题】：jQuery: Stop submitting form, perform script, continue submitting form?jQuery：停止提交表单，执行脚本，继续提交表单？
【发布时间】：2019-01-21 18:45:24
【问题描述】：

我有一个表格，当我提交他时，我执行了多个脚本。这是我的代码：

$("#RequestCreateForm").submit(function (e) {
    if ($("#RequestCreateForm").validate().checkForm() == false) { return; }

    e.preventDefault();

    //many scripts

    //How to continue submitting?
}

在//many scripts 之后是否可以继续提交表单（以e.preventDefault(); 停止）？

谢谢

【问题讨论】：

删除 e.preventDefault();你会得到你想要的效果。
@Scott 违背了他的代码的目的。
@Razor - OP 没有提到脚本是否异步完成。如果不是，那么您不需要e.preventDefault();。如果是，那么您可以通过$.ajax 将它们关闭并使用完成的回调继续，这仍然意味着您不需要e.preventDefault();。
好的，我明白了。 :) 但是考虑如果脚本是同步的（这是假设，因为他没有使用 ajax 或其他一些异步技术），那么提交的时间范围很重要。在哪种情况下不需要 preventDefault() ？如果您删除它，表单将在他的脚本完成运行之前提交。（如果我错了，请纠正我）。

标签： javascript jquery-selectors jquery

【解决方案1】：

当您调用 $("#RequestCreateForm").submit() 时，脚本将再次通过事件处理程序运行，并导致无限循环（正如 Koen 在对已接受答案的评论中指出的那样）。因此，您需要在提交之前删除事件处理程序：

$("#RequestCreateForm").on('submit', function (e) {
    e.preventDefault();
    // do some stuff, and if it's okay:
    $(this).off('submit').submit();
});

最后一行需要在条件语句中，否则它总是会发生，并在顶部否定您的e.preventDefault();。

【讨论】：

太棒了！如果可以继续使用已停止的表单，则此选项。

【解决方案2】：


$("#RequestCreateForm").submit(function (e) {
    if ($("#RequestCreateForm").validate().checkForm() === false) { 
       e.preventDefault(); 
       //form was NOT ok - optionally add some error script in here

       return false; //for old browsers 
    } else{
       //form was OK - you can add some pre-send script in here
    }

    //$(this).submit(); 
    //you don't have to submit manually if you didn't prevent the default event before
}

【讨论】：

这将创建一个无限循环，从而触发“RangeError：超出最大调用堆栈大小。”
更新“return;” “返回错误”；根据 Bhanu Krishnan 的回答。此外，“==”应该是“===”。
问题已被编辑 - 现在可以使用了。 请注意，如果您正在为现代开发，则不必执行 return false;仅限浏览器:)

【解决方案3】：

$("#RequestCreateForm").submit(function (e) {
    if ($("#RequestCreateForm").validate().checkForm() == false) 
    { 
         e.preventDefault();
         return false; 
    }        

    //other scripts

}

【讨论】：

【解决方案4】：

这里的所有解决方案都太复杂或导致javascript错误，我猜是最简单和最清晰的解决方案：

jQuery("#formid").submit(function(e) {
        if( ! (/*check form*/)  ){  //notice the "!"
          e.preventDefault();
          //a bit of your code
        } //else do nothing, form will submit
});

【讨论】：

【解决方案5】：

$("#RequestCreateForm").submit(function (e) {
    if ($("#RequestCreateForm").validate().checkForm() == false) { return; }

    e.preventDefault();

    //many scripts

    // Bypass the jquery form object submit and use the more basic vanilla
    // javascript form object submit

    $("#RequestCreateForm")[0].submit();

}

【讨论】：

【解决方案6】：

为避免提交循环，应使用附加变量。

var codeExecuted = false;
$('#RequestCreateForm').submit(function(e) {
    ...
    if(!codeExecuted){
        e.preventDefault();
        ...
        functionExecuted = true;
        $(this).trigger('submit');
    }
});

【讨论】：

【解决方案7】：

这是我避免无限循环的方法。

在表单中，我使用带有 id 的“按钮”（例如<input type="button" id="submit" value="submit"/>）来模拟提交按钮；
在脚本中我有这样的内容：

$('#submit').click(function() {
  if(//validation rules is ok)
  {
      $("#RequestCreateForm").submit(); //assuming the form id is #RequestCreateForm
  }
  else
  {
      return false;
  }
});

【讨论】：

【解决方案8】：

返回；和 e.preventDefault() 是一样的；

试试

$("#RequestCreateForm").trigger('submit');

【讨论】：

return 与 e.preventDefault(); 不同。 return 也是 e.stopPropagation();，它会杀死冒泡的事件。 e.preventDefault(); 仍然允许事件冒泡，因此有所不同。