在多个ajax调用完成之前,如何阻止表单提交？jQuery的

Question

继上一个问题后,我问到关于禁用提交按钮,直到所有ajax调用完成返回...

即使禁用按钮和警告标志,人们似乎仍然设法提交表单.我想这可能是在文本输入中按"输入".

如何禁用整个表单,而不仅仅是提交按钮？

到目前为止的代码是:

// if we're waiting for any ajax to complete we need to disable the submit
$(document).ajaxStart(function() {
  $(".ajaxbutton").attr("disabled", "disabled");
  // if it's taken longer than 250ms display waiting message
  timer = setTimeout(function() {
    $('#processingAlert').html(' ...please wait one moment');
    $('#processingAlert').show();
  }, 250);
})
$(document).ajaxComplete(function() {
  $(".ajaxbutton").removeAttr("disabled");
    $('#processingAlert').hide();
    // cancel showing the message when the ajax call completes.
clearTimeout(timer);
});

另一件我应该提到的可能导致问题的是,同时发生多个ajax调用,EG一个div接收隐藏的输入,另一个div在页面的其他地方显示例如价格总和.

一些ajax调用快速完成的事实是否会否定ajaxStart的禁用效果？EG ajax call1和ajax call2都触发ajaxStart - call1很快就完成了,它会在我们等待call2完成时重新启用表单吗？

有没有更好的方法来做到这一点我们可以简单地测试所有ajax调用是否已经完成？

Answer 1

您可以为表单的提交事件添加事件处理程序。事件处理程序可以检查提交是否允许，如果不允许则中止。这是一些文档： http: //api.jquery.com/submit/

请注意，如果页面上的 javascript 在表单提交按钮之一上调用 .click()，则表单将在不调用 .submit() 处理程序的情况下提交。这是一个奇怪的 jQuery 问题（http://groups.google.com/group/jquery-en/browse_thread/thread/1317bfd4e3a8b233?pli=1），我猜 jQuery 人员并不认为这是一个错误。可能还有其他类似的情况，我希望不会。

如果您使用的是 ASP.NET，根据表单上的内容，ASP.NET 可能会注入“__doPostBack”函数。您可能需要通过使用调用原始函数的一些自定义代码重新定义它来挂钩该函数。