Question

我正在尝试调整一堆现有的网络应用，以防止用户意外地弹出提交按钮并提交表单两次。我认为jquery是最好的方法，尽管我的页面使用的是非常少的jquery。

我在这里发现了许多类似的问题，答案非常有用，但仍然没有提供完整而简单的解决方案。我遇到的第一个解决方案是：

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

它非常有效，在提交表单后灰显了提交按钮。问题是提交按钮本身的值不会随表单一起提交，我猜是因为它被禁用了。通常这不是问题，但对于某些应用程序来说，这是因为它们依赖于提交按钮的值来进行正确的操作。我想要一些更通用的东西，这些东西适用于那些页面，而不必重新设计它们。

然后我尝试了另一个例子：

$(document).ready(function(){
  $('form').submit(function(){
    $(this).submit(function() {
      return false;
    });
    return true;
  });
});

这适用于在仍然传输提交按钮的值的同时禁用多个提交，但它不会使提交按钮变灰，因此没有视觉指示提交已发生。如果我找不到更好的解决方案，我可能会选择，但我希望两者都传输按钮的值，并使按钮变灰。

我终于尝试了这个：

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

然而，它似乎就像第一个示例一样，提交按钮值不随表单一起传输，尽管在禁用之前显然应该发生this.submit（）。

我也尝试过隐藏按钮，但这会导致页面重新排列，而糟糕的用户会在鼠标弹跳时意外碰到完全不同的东西，而不是两次点击提交。

我可以用相同大小的内容替换按钮，或者尝试将提交值复制到带有名称的隐藏输入元素中，但这会变得怪诞。有没有一种简单的方法来满足这种简单的需求？

Answer 1

尝试使用提交按钮的点击处理程序并使用：

，而不是绑定FORM的提交事件

$('form :submit').click( function () {
    $(this).prop("disabled", true).closest('form').append($('<input/>', {
        type: 'hidden',
        name: this.name,
        value: this.value
    })).submit();
});

Answer 2

这个怎么样？

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

Answer 3

伪造一个禁用的按钮 - 看看CSS类以及你的第二段代码怎么样？

$(document).ready(function(){

  $('form').submit(function(){
    $("input[type=submit]").addClass("disabled");

    $(this).submit(function() {
      return false;
    });

    return true;
  });

});

Answer 4

我为此尝试了多种选项，但它无法正常工作。我的解决方案非常简单。只需将表单提交功能与父元素绑定即可。就我而言，就像这样：

$('.page-content').on('submit', '#frmOnlineOrder', function(e)
{
    e.stopImmediatePropagation();
    e.preventDefault();
    //put your working code here
}

欢迎您尝试此解决方案。如果这有用，请告诉我。

Answer 5

我还需要在提交时运行一些HTML5字段验证（必需），并通过jQuery $('form :submit').click(function(e) { // if any fields fail html5 validation, proceed normally in order to display errors if(!$('form')[0].checkValidity()) { return; } // add class to demark that button has been clicked if(!$(this).hasClass('disabled')) { e.preventDefault(); e.stopPropagation(); $(this).addClass('disabled'); $(this).click(); $(this).prop("disabled", true); } }); <button type="submit" name="action" value="submit" class="btn btn-primary">Submit</button> <button type="submit" name="action" value="save" class="btn btn-primary">Save Draft</button>提交表单将绕过验证。

这个解决方案对我来说很有用，请注意我还有2个提交按钮，我给每个按钮提供不同的值来辨别哪个＆＃39;动作＆＃39;点击了：

toArray

Answer 6

我一直认为这会很有效。也傻了..我有.attr工作而不是.prop

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

防止双重表单提交

6 个答案: