防止在jQuery中重复提交表单

一尘不染

防止在jQuery中重复提交表单

javascript

我的表单需要服务器处理一些时间。我需要确保用户等待并且不会再次单击按钮来尝试重新提交表单。我尝试使用以下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中包含哪个值使用了哪个按钮。我需要像平常一样提交表单，并且在发生这种情况后我需要立即禁用所有内容。

谢谢！

阅读 292

2020-04-25

共1个答案

一尘不染

更新：我对这个旧答案有几点看法，只是想补充一点，最好的解决方案是使操作具有幂等性，以便重复提交无害。

例如，如果表单创建了订单，则在表单中放置一个唯一的ID。服务器首次看到具有该ID的订单创建请求时，应创建该请求并响应“成功”。随后的提交也应回复“成功”（以防客户未获得第一个回复），但不应进行任何更改。

应该通过数据库中的唯一性检查来检测重复项，以防止出现竞争情况。

我认为您的问题是这一行：

$('input').attr('disabled','disabled');

您正在禁用所有输入，包括我认为应该提交其数据的输入。

要仅禁用提交按钮，您可以执行以下操作：

$('button[type=submit], input[type=submit]').prop('disabled',true);

但是，即使禁用了那些按钮，我也不认为IE会提交表单。我建议使用另一种方法。

一个jQuery插件来解决

我们只是使用以下代码解决了这个问题。这里的技巧是使用jQuerydata()将表单标记为已提交或未提交。这样，我们就不必弄乱提交按钮，这会使IE变得异常糟糕。

// 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();

2020-04-25