多次点击提交后如何只提交一次表单？

Question

我遇到的问题是，当我尝试通过单击提交按钮提交表单时，如果我再次单击提交按钮，则在此期间发布请求需要一些时间，它将再次发送所有参数和获取的参数保存两次，三次....等等。

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

Answer 1

禁用按钮是一种解决方案，但可能会给刚刚按 Enter 提交表单的键盘用户带来问题。在这种情况下，按钮不会被禁用。万无一失的方法是像这样处理onsubmit 事件：

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

（好吧，不管怎样，只要启用 JS 就可以确保成功）。您可以禁用该按钮，作为向最终用户确认表单也只能提交一次的视觉确认。

Answer 2

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

Answer 3

在 chrome 中使用这个：

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

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 看起来非常相似。

Answer 5

我知道这是旧的，但与其禁用，只是隐藏按钮，你不能点击你看不到的东西。

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

Answer 6

如果您在 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" />

Answer 7

我发现这个最有效的方法是如果表单上的所有信息都正确，然后将属性添加到提交按钮。万一用户需要返回并使用正确的信息再次填写表格。

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

Answer 8

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

<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
});

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

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();
}