Javascript 在提交表单时禁用按钮的最简单方法？

我一直在努力寻找“正确”的方法来防止表单的重复提交。网站上有很多相关的帖子，但是没有一篇适合我。下面是两个问题

这是我的表格

<form method="POST">
    <input type="text" name="q"/>
    <button class="once-only">Send</button>
</form>

这是此处建议的方法：。这篇文章建议提交元素必须是一个输入，而不是一个按钮，但是测试两者没有区别。你可以用这把小提琴自己试一试：

如您所见，这会禁用按钮，但也会阻止表单的提交。在提交元素是按钮和输入元素的情况下

问题1:为什么单击处理程序会停止提交表单

搜索更多信息，我发现此解决方案（来自）

您可以使用此小提琴演奏此乐曲：

这确实有效，但是

问题2:这是我们能做的最好的了吗

我认为这是一件基本的事情。方法1不起作用，方法2起作用，但我不喜欢它，我觉得必须有一种更简单的方法。

您可以使用jQuery的方法。在这种情况下，它应该如下所示：

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

这是一个正在工作的JSFIDLE（由Mike制作）-

如果提交按钮不是表单元素的直接子元素，则需要将子元素替换为

find

。此外，提交按钮也可以是

按钮

元素，而不是

输入

元素。如果你正在使用，情况就是这样。以下是该代码段的不同版本：

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

---

演示JSFIDLE-

您可以尝试使用以下代码：

$(document).ready(function(){
   $(".once-only").click(function(){
      this.submit();
      this.disabled = true;
      return true;
   });
});

这将有助于：

<form class="form-once-only" method="POST">
    <input type="text" name="q"/>
    <button type="submit" class="once-only">Send</button>
</form>

---

简单有效的解决方案是

<form ... onsubmit="myButton.disabled = true; return true;">
    ...
    <input type="submit" name="myButton" value="Submit">
</form>

...

---

来源：

类似地，我看到了一些示例，这一示例允许您通过超时更改按钮被禁用的时间。它也只会在表单提交时触发，而不是在按钮单击事件时触发，这最初会给我带来一些问题

    $('form').submit(function () {
        var button = $('#button');
        var oldValue = button.value;
        var isDisabled = true;

        button.attr('disabled', isDisabled);

        setTimeout(function () {
            button.value = oldValue;
            button.attr('disabled', !isDisabled);
        }, 3000)
    });

---

@MikeHogan您发布给我的JSFIDLE似乎使用了点击处理程序而不是我的提交处理程序，我想这可能就是原因。等我从医院回来，我会再看一眼的work@MikeHogan谢谢，如果可以的话，我会把它更新到我的答案中（给未来的观众看），并为此感谢你。这可能是IMO迄今为止最好的解决方案的副本。它与验证一起工作，而且不需要任何外部库。@mike hogan我想说这应该是公认的答案-可行，而且是最简单的。使用起来最简单有效！

返回true。下一个代码使用jQuery验证插件：
$(document).ready(function(){
    $("form.form-once-only").submit(function () {
        $(this).find(':button').prop('disabled', true);
    });
}

<form ... onsubmit="myButton.disabled = true; return true;">
    ...
    <input type="submit" name="myButton" value="Submit">
</form>

    $('form').submit(function () {
        var button = $('#button');
        var oldValue = button.value;
        var isDisabled = true;

        button.attr('disabled', isDisabled);

        setTimeout(function () {
            button.value = oldValue;
            button.attr('disabled', !isDisabled);
        }, 3000)
    });