Question

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

我尝试使用它来阻止它：

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

但问题是，它在Safari / Firefox等中完美运行，但在Internet Explorer 8中不起作用（可能不适用于6＆amp; 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 - ＆gt; Redirect - ＆gt; 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 ... });

防止jQuery中的双表单提交

4 个答案: