如何在多次点击提交按钮后仅提交一次表单？

Question

我遇到了一个问题，当我点击提交按钮时，它需要一些时间来发送请求。如果在此期间我再次点击提交按钮，它会再次发送所有参数，并且参数会重复保存多次。

我不知道如何限制提交按钮，以便表单不会被提交两次。 我认为当我点击提交时，我必须禁用提交按钮，这样用户就不能再次点击它，这是正确的方法吗？

- Salil

Answer 1

禁用按钮是一种解决方案，但可能会给只使用键盘提交表单的用户带来问题。在这种情况下，按钮将不会被禁用。最可靠的方法是处理onsubmit事件，方法如下：

(function () {
    var allowSubmit = true;
    frm.onsubmit = function () {
       if (allowSubmit)
           allowSubmit = false;
       else 
           return false;
    }
})();

（嗯，只要启用JS就可以肯定地实现）。您还可以禁用按钮作为视觉确认，向最终用户表明该表单只能提交一次。

- Andy E

---

没错，我想如果有人能够痉挛地点击鼠标，他们也可以痉挛地按下回车键。 - Zoidberg

非常正确。同时，在信息被发送时显示一条消息也是很好的做法（例如，在提交按钮旁边显示已被禁用）。 - Marcel Korpel

Answer 2

<input type="submit" onclick="this.disabled = true" value="Save"/>

- Zoidberg

---

请注意，如果您的按钮具有名称属性，则禁用它会防止该值包含在POST / GET中。 - stracktracer

这并不防止多次发送表单，请查看_Andy E_的答案。 - Tamás Bolvári

这是一个不可靠的解决方案（我知道它已经过时了）。请改用@Andy E的解决方案。原因：1）键盘输入，2）对于某些Chrome浏览器，这根本不会提交表单，3）刷新页面后按钮仍然禁用，4）侵入式JavaScript。 - janechii

@janecii 只需添加 autocomplete="off" 即可解决该问题。 - Zoidberg

@Zoidberg修复了问题3，也许这是一个好的解决方案，如果它可以跨浏览器工作...但问题1、2和4仍然存在。为什么不使用更可靠的解决方案呢？ - janechii

Answer 3

在 Chrome 中使用以下方法：

<input type="submit" onclick="this.form.submit();this.disabled = true;" value="Save"/>

- user3024034

Answer 4

我喜欢Zoidberg's answer的简单明了。

但如果你想使用代码而不是标记来连接处理程序（有些人更喜欢保持标记和代码完全分离），那么使用Prototype，以下是代码：

document.observe('dom:loaded', pageLoad);
function pageLoad() {
    var btn;

    btn = $('idOfButton'); // Or using other ways to get the button reference
    btn.observe('click', disableOnClick);
}
function disableOnClick() {
    this.disabled = true;
}

或者您可以使用匿名函数（我不是它们的粉丝）：

document.observe('dom:loaded', function() {
    var btn;

    btn = $('idOfButton'); // Or using other ways to get the button reference
    btn.observe('click', function() {
        this.disabled = true;
    });
});

使用jQuery完成它看起来非常相似。

- T.J. Crowder

---

好的答案，多个选项总是很好的，特别是当它们涉及到一个可靠的库时。 - Zoidberg

Answer 5

我发现最好的方法是，如果表单上的所有信息都正确，则将属性添加到提交按钮。以防用户需要回来再次填写正确的信息。

document.querySelector('.btn').addEventListener('submit',function(){
    if(input.value){
        this.setAttribute("disabled", "true")
    }
};

- Brad Vanderbush

Answer 6

如果您在 PHP 中使用表单提交 / POST，则请使用此代码。

onclick="disableMe();" in type="submit" 

它的提交按钮代码

<input name="bt2" type="submit" onclick="disableMe();" id="bt2" style="width:50px;height:30px; margin-left:30px;" value="Select" />

- user3314233

Answer 7

我知道这是老旧的，但与其禁用，不如只隐藏按钮，你看不见的东西就无法点击。

<input type="submit" onclick="this.style.visibility = 'hidden'" value="Save"/>

- Chad

---

问题在于，无论如何它都会变得不可见，即使有表单验证，按钮也会消失:p - Jono

Answer 8

您可以使用 .once() 方法调用该函数一次：

<form method="post" id="my-form">
  <input type="text" name="input1">
  <input type="text" name="input2">
  <input type="text" name="input3">

  ...

  <div class="button" id="submit-button" onclick.once="submitOnce()">
    Submit
  </div>
</form>

- JOYAL SHAH

Answer 9

一个解决方案是不使用 <input> 作为提交按钮，而是使用一个被样式化为按钮的 <div>（或 <span>），并具有一个 onclick 属性：

<form method="post" id="my-form">
  <input type="text" name="input1">
  <input type="text" name="input2">
  <input type="text" name="input3">

  ...

  <div class="button" id="submit-button" onclick="submitOnce()">
    Submit
  </div>
</form>

而 submitOnce 函数将首先删除 onclick 属性，然后提交表单：

function submitOnce() {
  document.getElementById('submit-button').removeAttribute('onclick');
  document.getElementById('my-form').submit();
}

- Faheel

Answer 10

您可以将下一个脚本添加到您的“布局页面”（以便在全局所有页面上呈现）。

<script type="text/javascript">
    $(document).ready(function () {
        $(':submit').removeAttr('disabled'); //re-enable on document ready
    });
    $('form').submit(function () {
        $(':submit').attr('disabled', 'disabled'); //disable on any form submit
    });
</script>

然后，每次提交表单时，提交按钮都会被禁用。（在加载页面时，提交按钮将重新启用。）

如果您正在使用验证框架（如jQuery Validation），当验证失败时，可能需要重新启用提交按钮（因为表单验证失败会导致提交被取消）。

如果您正在使用jQuery Validation，可以通过添加以下代码来检测表单验证失败（即表单提交被取消）：

$('form').bind('invalid-form.validate', function () {
    $(':submit').removeAttr('disabled'); //re-enable on form invalidation
});

如果表单验证失败，则提交按钮将重新启用。

- tecla