防止在 jQuery 中重复提交表单如何做

javascript jquery forms http-post double-submit-prevention

2022-08-30 01:51:48

我有一个表单，服务器需要一点时间来处理。我需要确保用户等待并且不会尝试通过再次单击按钮来重新提交表单。我尝试使用以下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中。我需要像往常一样提交表单，并且需要在此发生后立即禁用所有内容。

谢谢！

答案 1

2018年更新：我刚刚为这个旧答案得到了一些分数，只是想补充一点，最好的解决方案是使操作幂等，以便重复提交是无害的。

例如，如果表单创建了订单，请在表单中放置一个唯一的ID。服务器第一次看到具有该 ID 的订单创建请求时，应创建该请求并响应“成功”。后续提交也应该响应“成功”（以防客户端没有收到第一个响应），但不应该改变任何东西。

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

我认为你的问题是这条线：

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

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

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

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

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

一个jQuery插件来解决它

我们刚刚通过以下代码解决了这个问题。这里的诀窍是使用jQuery将表单标记为已提交或未提交。这样，我们就不必弄乱提交按钮，这吓坏了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();

答案 2

计时方法是错误的 - 您如何知道该操作将在客户端的浏览器上执行多长时间？

如何做

$('form').submit(function(){
  $(this).find(':submit').attr('disabled','disabled');
});

提交表单后，它将禁用其中的所有提交按钮。

请记住，在 Firefox 中，当您禁用按钮时，当您返回历史记录时，将记住此状态。例如，为了防止这种情况，您必须在页面加载时启用按钮。