我的表单需要服务器处理一些时间。我需要确保用户等待并且不会再次单击按钮来尝试重新提交表单。我尝试使用以下jQuery代码:
<script type="text/javascript"> $(document).ready(function() { $("form#my_form").submit(function() { $('input').attr('disabled', 'disabled'); $('a').attr('disabled', 'disabled'); return true; }); }); </script>
当我在Firefox中尝试此操作时,所有功能都被禁用,但是该表单未与应该包含的任何POST数据一起提交。我不能使用jQuery提交表单,因为我需要将按钮与表单一起提交,因为有多个提交按钮,并且我确定POST中包含哪个值使用了哪个按钮。我需要像平常一样提交表单,并且在发生这种情况后我需要立即禁用所有内容。
谢谢!
更新 :我对这个旧答案有几点看法,只是想补充一点,最好的解决方案是使操作具有幂等性,以便重复提交无害。
例如,如果表单创建了订单,则在表单中放置一个唯一的ID。服务器首次看到具有该ID的订单创建请求时,应创建该请求并响应“成功”。随后的提交也应回复“成功”(以防客户未获得第一个回复),但不应进行任何更改。
应该通过数据库中的唯一性检查来检测重复项,以防止出现竞争情况。
我认为您的问题是这一行:
$('input').attr('disabled','disabled');
您正在禁用所有输入,包括我认为应该提交其数据的输入。
要仅禁用提交按钮,您 可以 执行以下操作:
$('button[type=submit], input[type=submit]').prop('disabled',true);
但是,即使禁用了那些按钮,我也不认为IE会提交表单。我建议使用另一种方法。
我们只是使用以下代码解决了这个问题。这里的技巧是使用jQuerydata()将表单标记为已提交或未提交。这样,我们就不必弄乱提交按钮,这会使IE变得异常糟糕。
data()
// jQuery plugin to prevent double submission of forms jQuery.fn.preventDoubleSubmission = function() { $(this).on('submit',function(e){ var $form = $(this); if ($form.data('submitted') === true) { // Previously submitted - don't submit again e.preventDefault(); } else { // Mark it so that the next submit can be ignored $form.data('submitted', true); } }); // Keep chainability return this; };
像这样使用它:
$('form').preventDoubleSubmission();
如果 应 允许AJAX表单在每次加载页面时提交多次,则可以给它们提供一个类来表明这一点,然后像这样从选择器中排除它们:
$('form:not(.js-allow-double-submission)').preventDoubleSubmission();