防止双重表单提交
我正在尝试调整一堆现有的网络应用程序，以防止用户意外地弹出提交按钮并提交表单两次。 我认为jquery是最好的方法，尽管我的页面使用非常少的jquery。
我在这里发现了许多类似的问题，答案非常有用，但仍然没有提供完整而简单的解决方案。 我遇到的第一个解决方案是：
$(document).ready(function(){ $('form').submit(function(){ $("input[type=submit]").prop("disabled", true); }); }); 它工作得很好，在提交表单后使提交按钮变灰。 问题是提交按钮本身的值不会随表单一起提交，我猜是因为它被禁用了。 通常这不是问题，但对于某些应用程序来说，这是因为它们依赖于提交按钮的值来正确操作。 我希望更通用的东西可以用于那些页面，而无需重新设计它们。
然后我尝试了另一个例子：
$(document).ready(function(){ $('form').submit(function(){ $(this).submit(function() { return false; }); return true; }); });
这适用于在仍然传输提交按钮的值的同时禁用多个提交，但它不会使提交按钮变灰，因此没有视觉指示提交已发生。 如果我找不到更好的解决方案，我可能会继续使用，但我希望两者都传输按钮的值，并使按钮变灰。
我终于尝试了这个：
$(document).ready(function(){ $('form').submit(function(){ this.submit(); $("input[type=submit]").prop("disabled", true); return false; }); });
但是，它似乎就像第一个示例一样，提交按钮值不随表单一起传输，尽管this.submit（）显然应该在禁用之前发生。
我也尝试过隐藏按钮，但这会导致页面重新排列，而不良用户会在鼠标弹跳时意外碰到完全不同的东西，而不是两次点击提交。
我可以用相同大小的东西替换按钮，或者尝试将提交值复制到带有名称的隐藏输入元素中，但这会变得怪诞。 有没有一种简单的方法来满足这种简单的需求？
而不是绑定FORM的提交事件，尝试使用提交按钮的单击处理程序并使用：
$('form :submit').click( function () { $(this).prop("disabled", true).closest('form').append($('', { type: 'hidden', name: this.name, value: this.value })).submit(); });
这个怎么样？
$('form').submit(function(e){ e.preventDefault(); this.submit(); $("input[type=submit]").prop("disabled", true); });
伪造一个禁用的按钮 – 看看CSS类以及你的第二段代码怎么样？
$(document).ready(function(){ $('form').submit(function(){ $("input[type=submit]").addClass("disabled"); $(this).submit(function() { return false; }); return true; }); });
我尝试了多种选择，但它没有正常工作。 我的解决方案非常简单。 只需将表单提交function与父元素绑定即可。 就我而言，它是这样的：
$('.page-content').on('submit', '#frmOnlineOrder', function(e) { e.stopImmediatePropagation(); e.preventDefault(); //put your working code here }
欢迎您尝试此解决方案。 如果这有用，请告诉我。
我还需要运行一些HTML5字段validation（必需），我需要在提交和提交表单时运行jQuery ($('form').submit())将绕过validation。
这个解决方案对我来说很有用，请注意我还有2个提交按钮，我给每个按钮提供了不同的值来辨别点击了哪个’动作’：
$('form :submit').click(function(e) { // if any fields fail html5 validation, proceed normally in order to display errors if(!$('form')[0].checkValidity()) { return; } // add class to demark that button has been clicked if(!$(this).hasClass('disabled')) { e.preventDefault(); e.stopPropagation(); $(this).addClass('disabled'); $(this).click(); $(this).prop("disabled", true); } });
我总是认为这会很有效。 也傻了..我有.attr工作而不是.prop
.attr('disabled', 'disabled');