Javascript 如何在多次单击“提交”后仅提交一次表单？

我遇到的问题是，当我试图通过点击提交按钮提交表单时，在此期间发布请求需要一些时间。如果我再次点击提交按钮，它将再次发送所有参数，并将参数保存两次、三次……以此类推

我不知道如何限制提交按钮，这样表单就不会被提交两次。 我想当我点击submit时，我必须禁用submit按钮，这样用户就不能再点击它了，这样做对吗？

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

我喜欢这本书的简洁和直接

但是，如果您想使用代码而不是标记连接该处理程序（有些人更喜欢将标记和代码完全分开），那么它将使用：

或者可以使用匿名函数（我不喜欢）：

---

使用看起来非常相似。

禁用该按钮是一种解决方案，但可能会给刚按enter键提交表单的键盘用户带来问题。在这种情况下，按钮不会被禁用。sure fire方法将处理

onsubmit

事件，如下所示：

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

---

（好吧，不管怎样，只要启用了JS，您就一定会火起来）。您可以禁用该按钮，作为对最终用户的视觉确认，该表单也只能提交一次。

我知道这是旧的，但与其禁用，不如隐藏该按钮，您不能单击您看不到的内容

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

---

如果在PHP中使用表单提交/发布，请使用此代码

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

它的提交按钮代码

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

---

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

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

在chrome中，请使用以下命令：

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

---

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

---

然后，如果表单验证失败，则再次启用提交按钮。

一种解决方案是不使用

作为提交按钮，而是使用样式为按钮的

（或

），具有

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>

---

回答得好，多个选项总是好的，特别是当它们涉及到一个坚实的库时。没错，我想如果有人可以在空间上点击鼠标，他们可以在空间上点击回车按钮，这是非常正确的。显示信息正在发送的消息也很好（例如，在信息被禁用后，在提交按钮旁边）。@JeffBleck刚刚在Chrome中测试了它，对我有效，也许你做错了什么。嗨，Chrome 17似乎也不起作用。Mac os 10.6.8，chrome 17.0请注意，如果您的按钮具有名称属性，禁用该属性将阻止在POST/GET中包含该值。这不会阻止多次发送表单，请参阅Andy E的答案。这是一个不可靠的解决方案（我知道它已过时）。请改用@Andy E解决方案。原因：1）键盘输入，2）对于某些Chrome，这根本不会提交表单，3）按钮在页面刷新时仍然处于禁用状态，4）侵入式Javascript问题在于，无论发生什么情况，它都会使表单不可见，即使有表单验证，按钮也会消失：p

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

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

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

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

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