防止 jQuery 中表单的重复提交

Question

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

谢谢！

Answer 1

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

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

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

---

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

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

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

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

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

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

一个 jQuery 插件来解决这个问题

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

Answer 2

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

如何操作

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

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

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

Answer 3

我认为内森·朗的答案是正确的选择。对我来说，我使用客户端验证，所以我只是添加了一个条件，即表单有效。

编辑：如果不添加此项，如果客户端验证遇到错误，用户将永远无法提交表单。

        // 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
                    alert('Form already submitted. Please wait.');
                    e.preventDefault();
                } else {
                    // Mark it so that the next submit can be ignored
                    // ADDED requirement that form be valid
                    if($form.valid()) {
                        $form.data('submitted', true);
                    }
                }
            });

            // Keep chainability
            return this;
        };

Answer 4

event.timeStamp 在 Firefox 中不起作用。返回 false 是非标准的，您应该调用 event.preventDefault()。当我们这样做时，总是将大括号与控制结构一起使用。

总结之前的所有答案，这里有一个可以完成这项工作并跨浏览器工作的插件。

jQuery.fn.preventDoubleSubmission = function() {

    var last_clicked, time_since_clicked;

    jQuery(this).bind('submit', function(event) {

        if(last_clicked) {
            time_since_clicked = jQuery.now() - last_clicked;
        }

        last_clicked = jQuery.now();

        if(time_since_clicked < 2000) {
            // Blocking form submit because it was too soon after the last submit.
            event.preventDefault();
        }

        return true;
    });
};

为了解决 Kern3l 问题，计时方法对我来说很有效，因为我们试图阻止双击提交按钮。如果您对提交的响应时间很长，我建议您用微调器替换提交按钮或表单。

正如上面大多数示例所做的那样，完全阻止表单的后续提交会产生一个严重的副作用：如果出现网络故障并且他们想要尝试重新提交，他们将无法这样做，并且会丢失他们所做的更改制成。这肯定会让用户愤怒。

Answer 5

请查看 jquery-safeform 插件。

使用示例：

$('.safeform').safeform({
    timeout: 5000,  // disable next submission for 5 sec
    submit: function() {
        // You can put validation and ajax stuff here...

        // When done no need to wait for timeout, re-enable the form ASAP
        $(this).safeform('complete');
        return false;
    }
});

Answer 6

...但表单未提交
任何它应该发送的 POST 数据
包括。

正确的。禁用的表单元素名称/值将不会发送到服务器。您应该将它们设置为只读元素。

另外，锚点不能像这样被禁用。您需要删除它们的 HREF（不推荐）或阻止它们的默认行为（更好的方法），例如：

<script type="text/javascript">
$(document).ready(function(){
    $("form#my_form").submit(function(){
      $('input').attr('readonly', true);
      $('input[type=submit]').attr("disabled", "disabled");
      $('a').unbind("click").click(function(e) {
          e.preventDefault();
          // or return false;
      });
    });
</script>

Answer 7

有可能改进 Nathan Long 的方法。
您可以用以下逻辑替换检测已提交表单的逻辑：

var lastTime = $(this).data("lastSubmitTime");
if (lastTime && typeof lastTime === "object") {
    var now = new Date();
    if ((now - lastTime) > 2000) // 2000ms
        return true;
    else
        return false;
}
$(this).data("lastSubmitTime", new Date());
return true; // or do an ajax call or smth else

Answer 8

Nathan 的代码，但适用于 jQuery Validate 插件

如果您碰巧使用 jQuery Validate 插件，它们已经实现了提交处理程序，在这种情况下，没有理由实现多个。代码：

jQuery.validator.setDefaults({
  submitHandler: function(form){
    // Prevent double submit
    if($(form).data('submitted')===true){
      // Previously submitted - don't submit again
      return false;
    } else {
      // Mark form as 'submitted' so that the next submit can be ignored
      $(form).data('submitted', true);
      return true;
    }
  }
});

您可以轻松地在 } else { 块中展开它以禁用输入和/或提交按钮。

干杯

Answer 9

使用两个提交按钮。

<input id="sub" name="sub" type="submit" value="OK, Save">
<input id="sub2" name="sub2" type="submit" value="Hidden Submit" style="display:none">

和 jQuery：

$("#sub").click(function(){
  $(this).val("Please wait..");
  $(this).attr("disabled","disabled");
  $("#sub2").click();
});

Answer 10

您可以通过此停止第二次提交

$("form").submit(function() {
        // submit more than once return false
        $(this).submit(function() {
            return false;
        });
        // submit once return true
        return true; // or do what you want to do
    });
});

Answer 11

我最终使用这篇文章中的想法提出了一个与 AtZako 的版本非常相似的解决方案。

 jQuery.fn.preventDoubleSubmission = function() {

    var last_clicked, time_since_clicked;

    $(this).bind('submit', function(event){

    if(last_clicked) 
      time_since_clicked = event.timeStamp - last_clicked;

    last_clicked = event.timeStamp;

    if(time_since_clicked < 2000)
      return false;

    return true;
  });   
};

像这样使用：

$('#my-form').preventDoubleSubmission();

我发现不包括某种超时但只是禁用提交或禁用表单元素的解决方案会导致问题，因为一旦触发锁定，您就无法再次提交，直到刷新页面。这会给我在做 ajax 的时候带来一些问题。

这可能可以稍微美化一下，因为它并不那么花哨。

Answer 12

如果使用 AJAX 发布表单，设置 async: false 应该可以防止在表单清除之前进行额外的提交：

$("#form").submit(function(){
    var one = $("#one").val();
    var two = $("#two").val();
    $.ajax({
      type: "POST",
      async: false,  // <------ Will complete submit before allowing further action
      url: "process.php",
      data: "one="+one+"&two="+two+"&add=true",
      success: function(result){
        console.log(result);
        // do something with result
      },
      error: function(){alert('Error!')}
    });
    return false;
   }
});

Answer 13

针对 Bootstrap 3 稍微修改了 Nathan 的解决方案。这将为提交按钮设置加载文本。此外，它会在 30 秒后超时并允许重新提交表单。

jQuery.fn.preventDoubleSubmission = function() {
  $('input[type="submit"]').data('loading-text', 'Loading...');

  $(this).on('submit',function(e){
    var $form = $(this);

    $('input[type="submit"]', $form).button('loading');

    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);
      $form.setFormTimeout();
    }
  });

  // Keep chainability
  return this;
};

jQuery.fn.setFormTimeout = function() {
  var $form = $(this);
  setTimeout(function() {
    $('input[type="submit"]', $form).button('reset');
    alert('Form failed to submit within 30 seconds');
  }, 30000);
};

Answer 14

提交时使用简单计数器。

    var submitCounter = 0;
    function monitor() {
        submitCounter++;
        if (submitCounter < 2) {
            console.log('Submitted. Attempt: ' + submitCounter);
            return true;
        }
        console.log('Not Submitted. Attempt: ' + submitCounter);
        return false;
    }

并在提交表单时调用 monitor() 函数。

    <form action="/someAction.go" onsubmit="return monitor();" method="POST">
        ....
        <input type="submit" value="Save Data">
    </form>

Answer 15

我也遇到过类似的问题，我的解决方案如下。

如果您没有任何客户端验证，那么您可以简单地使用此处记录的 jquery one() 方法。

http://api.jquery.com/one/

这会在调用处理程序后禁用该处理程序。

$("#mysavebuttonid").on("click", function () {
  $('form').submit();
});

如果您像我一样进行客户端验证，那么它会稍微棘手一些。上面的示例不会让您在验证失败后再次提交。尝试这种方法

$("#mysavebuttonid").on("click", function (event) {
  $('form').submit();
  if (boolFormPassedClientSideValidation) {
        //form has passed client side validation and is going to be saved
        //now disable this button from future presses
        $(this).off(event);
   }
});

Answer 16

只要您不导入 jQuery 验证插件，所有这些解决方案都是可以通过的。

例如，如果客户端输入无效输入并提交表单，则无论 jQuery 验证是否检测到无效输入，该按钮都将被禁用。然后，客户在修复输入后将无法重新提交表单。

此问题的解决方法只需要一个 if 语句：

$('form').submit(function () {
    if ($(this).valid()) {
        $(this).find("input[type='submit']").prop('disabled', true);
    }
});

将此代码添加到我的全局导入的 JavaScript 文件中后，我在尝试在我的网站上重复发布表单时失败了。

Answer 17

我的解决方案：

// jQuery plugin to prevent double submission of forms
$.fn.preventDoubleSubmission = function () {
    var $form = $(this);

    $form.find('[type="submit"]').click(function () {
        $(this).prop('disabled', true);
        $form.submit();
    });

    // Keep chainability
    return this;
};

Answer 18

就我而言，表单的 onsubmit 有一些验证代码，因此我增加 Nathan Long 答案，包括 onsubmit 检查点

$.fn.preventDoubleSubmission = function() {
      $(this).on('submit',function(e){
        var $form = $(this);
        //if the form has something in onsubmit
        var submitCode = $form.attr('onsubmit');
        if(submitCode != undefined && submitCode != ''){
            var submitFunction = new Function (submitCode);
            if(!submitFunction()){
                event.preventDefault();
                return false;
            }                   
        }

        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;
    };

Answer 19

更改提交按钮：

<input id="submitButtonId" type="submit" value="Delete" />

使用普通按钮：

<input id="submitButtonId" type="button" value="Delete" />

然后使用单击功能：

$("#submitButtonId").click(function () {
        $('#submitButtonId').prop('disabled', true);
        $('#myForm').submit();
    });

并记住在必要时重新启用按钮：

$('#submitButtonId').prop('disabled', false);

Answer 20

我不敢相信指针事件的老式 CSS 技巧：还没有提到过。我通过添加禁用属性遇到了同样的问题，但这不会回发。请尝试以下操作，并将 #SubmitButton 替换为您的提交按钮的 ID。

$(document).on('click', '#SubmitButton', function () {
    $(this).css('pointer-events', 'none');
})

Answer 21

为什么不只是这样——这将提交表单，但也会禁用提交按钮，

   $('#myForm').on('submit', function(e) {
       var clickedSubmit = $(this).find('input[type=submit]:focus');
       $(clickedSubmit).prop('disabled', true);
   });

另外，如果您使用 jQuery Validate，您可以将这两行放在 if ($('#myForm').valid( ））。

Answer 22

此代码将在按钮标签上显示加载，并将按钮设置为

禁用状态，然后在处理后重新启用并返回原始按钮文本**

$(function () {

    $(".btn-Loading").each(function (idx, elm) {
        $(elm).click(function () {
            //do processing
            if ($(".input-validation-error").length > 0)
                return;
            $(this).attr("label", $(this).text()).text("loading ....");
            $(this).delay(1000).animate({ disabled: true }, 1000, function () {
                //original event call
                $.when($(elm).delay(1000).one("click")).done(function () {
                    $(this).animate({ disabled: false }, 1000, function () {
                        $(this).text($(this).attr("label"));
                    })
                });
                //processing finalized
            });
        });
    });
    // and fire it after definition
});

Answer 23

我发现的绝对最好的方法是在单击时立即禁用按钮：

$('#myButton').click(function() {
    $('#myButton').prop('disabled', true);
});

并在需要时重新启用它，例如：

• 验证失败错误，然后使用 jQuery 进行错误响应后
• 服务器处理表单数据时出现

Answer 24

我使用以下方法解决了一个非常相似的问题：

$("#my_form").submit(function(){
    $('input[type=submit]').click(function(event){
        event.preventDefault();
    });
});