如何在多次单击“提交”后只提交一次表单?

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

禁用该按钮是一种解决方案,但可能会给刚按Enter提交表单的键盘用户带来问题。在这种情况下,按钮不会被禁用。确定的方法是处理 onsubmit 类似事件:

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

(好吧,不管怎样,只要启用JS,就一定要开火)。您可以禁用该按钮,作为对最终用户的视觉确认,表单也只能提交一次。

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

如果您在UJ中使用Rails,请看一下 disable_with 在里面 http://api.rubyonrails.org/classes/ActionView/Helpers/FormTagHelper.html#method-i-submit_tag

在Chrome中使用:

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

我知道这是旧的,但不是禁用,只是隐藏按钮,你不能点击你看不到的。

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

我发现最有效的方法是,如果表单上的所有信息都正确,然后将属性添加到提交按钮。如果用户需要返回并用正确的信息重新填写表单。

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