防止jQuery中的双表单提交

我有一个用户用来输入有关发布信息的表单。 完成后，单击“保存”进行更新。 但是，在一些罕见的情况下（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(""); }); 

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("