防止在jQuery中双重提交表单 [英] Prevent double submission of forms in jQuery

问题描述

我有一个表单需要一段时间才能处理服务器。我需要确保用户等待并且不再尝试通过再次单击该按钮重新提交表单。我尝试使用以下jQuery代码：

I have a form that takes a little while for the server to process. I need to ensure that the user waits and does not attempt to resubmit the form by clicking the button again. I tried using the following jQuery code:

<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中包含哪个值。我需要通常提交表单，我需要在发生后立即禁用所有内容。

When I try this in Firefox everything gets disabled but the form is not submitted with any of the POST data it is supposed to include. I can't use jQuery to submit the form because I need the button to be submitted with the form as there are multiple submit buttons and I determine which was used by which one's value is included in the POST. I need the form to be submitted as it usually is and I need to disable everything right after that happens.

谢谢！

推荐答案

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

Update in 2018: I just got some points for this old answer, and just wanted to add that the best solution would be to make the operation idempotent so that duplicate submissions are harmless.

例如，如果表单创建订单，请在表单中添加唯一ID。服务器第一次看到具有该ID的订单创建请求时，它应该创建它并响应成功。随后的提交也应该响应成功（如果客户没有得到第一个回复）但不应该改变任何东西。

Eg, if the form creates an order, put a unique ID in the form. The first time the server sees an order creation request with that id, it should create it and respond "success". Subsequent submissions should also respond "success" (in case the client didn't get the first response) but shouldn't change anything.

应该通过唯一性检测重复项检查数据库以防止竞争条件。

Duplicates should be detected via a uniqueness check in the database to prevent race conditions.

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

I think that your problem is this line:

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

您正在禁用所有输入，包括，我猜，那些数据形式的输入应该提交。

You're disabling ALL the inputs, including, I'd guess, the ones whose data the form is supposed to submit.

要禁用提交按钮，可以执行此操作：

To disable just the submit button(s), you could do this:

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

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

However, I don't think IE will submit the form if even those buttons are disabled. I'd suggest a different approach.

我们刚刚解决了这个问题以下代码。这里的技巧是使用jQuery的 data（）将表单标记为已提交或未提交。这样，我们就不必弄乱提交按钮，这会让IE出局。

We just solved this problem with the following code. The trick here is using jQuery's data() to mark the form as already submitted or not. That way, we don't have to mess with the submit buttons, which freaks IE out.

// 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表单，应允许每次提交多次页面加载，你可以给他们一个表示，然后将它们从你的选择器中排除，如下所示：

If there are AJAX forms that should be allowed to submit multiple times per page load, you can give them a class indicating that, then exclude them from your selector like this:

$('form:not(.js-allow-double-submission)').preventDoubleSubmission();

这篇关于防止在jQuery中双重提交表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！