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

Posted 2023-02-22

【中文标题】多次点击提交后如何只提交一次表单？

【英文标题】：How to submit form only once after multiple clicking on submit?

【发布时间】：2011-02-02 11:46:17

【问题描述】：

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

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

【参考方案1】：

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

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

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

【讨论】：

确实如此，我猜如果有人可以痉挛地敲击鼠标，他们也可以痉挛地敲击回车键

非常正确。显示正在发送信息的消息也很不错（例如，在禁用后的提交按钮旁边）。

【参考方案2】：

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

【讨论】：

@JeffBleck 刚刚在 Chrome 中测试过，对我有用，也许你做错了什么。

嗨，Chrome 17 似乎也无法正常工作。 Mac 操作系统 10.6.8 , 铬 17.0

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

这不会阻止多次发送表单，请参阅 Andy E 的答案。

这是一个不可靠的解决方案（我知道它已经过时了）。请改用@Andy E 解决方案。原因：1）键盘输入，2）对于某些 Chrome，这根本不会提交表单，3）页面刷新时按钮保持禁用状态，4）侵入性 javascript

【参考方案3】：

在 chrome 中使用这个：

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

【参考方案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 看起来非常相似。

【讨论】：

好答案，多个选项总是好的，尤其是当它们涉及到一个可靠的库时。

【参考方案5】：

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

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

【讨论】：

这样做的问题是它无论如何都会使它不可见，即使有表单验证按钮也会消失：p

【参考方案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" />

【参考方案7】：

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

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

【参考方案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
);

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

【参考方案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();