jQuery 提交表单然后禁用所有 'input[type="submit"]' 以防止重复提交

Question

我遇到了一个奇怪的问题，常见的解决方案似乎无法解决。当用户单击基于 html 的表单时，如果他们单击 'save'、'previous' 或 'next'.

，我会得到一些奇怪的行为

<div class="form-tab-nav form-tab-nav-bottom">
  <input id="tab" name="tab" tabindex="25" type="hidden" value="3">
  <input name="commit" tabindex="26" type="submit" value="Save">
    <input id="prev_commit_bottom" name="prev_commit[bottom]" tabindex="27" type="submit" value="<< Prev">
  <input class="orange" id="next_commit_bottom" name="next_commit[bottom]" tabindex="28" type="submit" value="Next >>">
</div>

使用 jQuery 1.6.1:

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

这将禁用该按钮，因此不允许第二个 post 请求，但它会禁用重定向。即单击 'previous' 或 'next' 与单击 'save'.

的行为相同

Answer 1

因为您在提交之前禁用了表单，所以什么也不会发生。您必须设置超时以允许提交发生。

$('form').submit(function() {
    var after = $.proxy(function () {
        $(this).find("input[type='submit']").prop('disabled',true);
    },this);
    window.setTimeout(after,50);
});

或

$('form').submit(function() {
    var elems = $(this).find("input[type='submit']");
    var after = function () {
        elems.prop('disabled',true);
    };
    window.setTimeout(after,50);
});

Answer 2

代替这一行

<input id="prev_commit_bottom" name="prev_commit[bottom]" tabindex="27" type="submit" value="<< Prev">

试试这个

<input id="prev_commit_bottom" name="prev_commit[bottom]" tabindex="27" type="submit" value="&lt;&lt; Prev">

Answer 3

感谢大家的帮助，但这是解决我们双重提交问题的解决方案：

  $('form').submit(function(e) {
    var $form = $(this);
    if ($form.data('submitted') === true) {
      e.preventDefault();
    } else {
      $form.data('submitted', true);
    }
  });

jQuery 提交表单然后禁用所有 'input[type="submit"]' 以防止重复提交

jQuery submit form and then disable all 'input[type="submit"]' to prevent duplicate submissions

html

javascript

forms

jquery