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

我喜欢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 4

如果您将Rails与ujs一起使用，请查看http://api.rubyonrails.org/classes/ActionView/Helpers/FormTagHelper.html#method-i-submit_tag中的disable_with

Answer 5

在Chrome中使用此：

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

Answer 6

我知道这是旧的，但不是禁用，只需隐藏按钮，您就无法点击您无法看到的内容。

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

Answer 7

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

我发现此方法最有效的最佳方法是，如果表单上的所有信息均正确，则将属性添加到“提交”按钮。如果用户需要回来并再次使用正确的信息填写表格。

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

Answer 9

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

<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验证），则当验证失败时，可能还需要重新启用提交按钮。（因为表单验证失败使提交被取消）。

如果您使用的是jQuery Validation，则可以添加以下内容来检测表单无效（取消表单提交）：

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

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

Answer 10

一种解决方案是不使用<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();
}

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

10 个答案: