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

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

本文关键字：提交 submit type input 然后 表单 jQuery      更新时间：2023-09-26

我有一个奇怪的问题，常见的解决方案似乎无法解决。当用户单击基于html的表单时，如果他们单击"保存"，"上一个"或"下一个"，就会收到一些时髦的行为。

<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 请求，但它会禁用重定向。也就是说，单击"上一个"或"下一个"的行为与单击"保存"的行为相同。

由于您在表单提交之前禁用了表单，因此不会发生任何操作。您必须设置超时才能允许提交。

$('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);
});

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

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

而不是这一行 

<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">
相关文章：