防止在 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屋！