Question

我有一个奇怪的问题，通常的解决方案似乎无法修复。当用户点击基于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);
});

这将禁用该按钮，以便不允许第二个发布请求，但它会禁用重定向。单击“上一个”或“下一个”将与单击“保存”的行为相同。

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

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

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

Answer 3

而不是这一行

<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">

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

3 个答案: