防止在jQuery中重复提交表单

小编典典

防止在jQuery中重复提交表单

all

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

谢谢！

阅读 204

2022-08-08

共1个答案

小编典典

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

例如，如果表单创建订单，则在表单中放置一个唯一 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();

2022-08-08