小编典典

防止在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中包含哪个值使用了哪个按钮。我需要像平常一样提交表单,并且在发生这种情况后我需要立即禁用所有内容。

谢谢!


阅读 342

收藏
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