防止jQuery中的双表单提交

Question

我有一个用户用来输入有关发布信息的表单。 完成后，单击“保存”进行更新。 但是，在一些罕见的情况下（15,000条记录中有10条），用户双击了保存按钮并导致双重表单提交重复发布项目。

我尝试使用它来防止它：

$('input[type=submit]').click(function(){
    $('input[type=submit]').attr('disabled',true);
    //return true;
});

但问题是，它在Safari / Firefox等中完美运行，但在Internet Explorer 8中不起作用（可能不适用于6和7）

当我在IE8中按保存时，该按钮被禁用，就是这样，根本没有提交表单。

（我尝试过但没有返回true;）

Answer 1

我不确定这是一个完整的猜测，但它可能取决于你的选择器。 尝试改为：

$('input:submit').click(function() {
    $(this).attr('disabled', true);
});#

您也可以尝试拦截submit event本身：

$('form').bind('submit', function(e) {
     $(this).find('input:submit').attr('disabled', 'disabled');
});

Answer 2

您需要处理表单的onsubmit事件而不是提交按钮的click事件。

Answer 3

用户也可以按回车键提交表单，所以不用绑定按钮点击事件，而是使用表单提交。 而不是禁用，通过将其替换为一些加载图像来隐藏提交按钮。

jQuery("form").submit(function () {
        jQuery(":submit", this).css("display", "none");
        jQuery(":submit", this).after("<span><img src='loading.gif' /></span>");
});

Answer 4

Chirs，这是每个Web开发人员面临的一个非常普遍的问题。 猜猜看，它有一个非常好的解决方案。

该解决方案称为PRG（Post - > Redirect - > Get）。 有关详情，请访问http://en.wikipedia.org/wiki/Post/Redirect/Get

基本上，您需要将页面保留为HTTP GET模式，这样即使用户刷新页面，也不会重新提交任何数据。 因此，您提交表单，将页面重定向到URL，该URL通过执行GET请求显示最近提交的数据。

编辑根据以下评论，似乎克里斯已经遵循上述范例。 大。 但他仍然看到重复的表格提交。 我建议在第一次提交时，用加载图像替换按钮（作为第一件事），以便用户看不到任何按钮重新点击:)

$(document).ready(function() {
   // function which handles form submission
   $(#submitButton).replaceWith("<img src="./images/myLoader.gif>");
   // do the actual form submission after this
   ...
});