Javascript 多次单击提交后如何仅提交一次表单？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2545641/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to submit form only once after multiple clicking on submit?
提问by Salil
I am having problem that when i am trying to submit the form by clicking on the submit button it takes some time to post request during this if i am again click on the Submit button it will again send the all parameters and parametrs get saved twice, thrice ....so on.
我遇到的问题是，当我尝试通过单击提交按钮提交表单时，在此期间发布请求需要一些时间，如果我再次单击提交按钮，它将再次发送所有参数和参数被保存两次，三次……等等。
I don't know how to limit the the submit button so that form shouldn't get submitted twice. I think when i cliked on submit i have to disable submit button so that user can't click it again, is it right approach to doing this?
我不知道如何限制提交按钮，这样表单不应该被提交两次。我认为当我点击提交时，我必须禁用提交按钮，以便用户无法再次单击它，这样做是否正确？
回答by Andy E
Disabling the button is one solution, but potentially poses a problem for keyboard users who just hit enter to submit a form. In this scenario, the button won't be disabled. The sure-fire method would be to handle the onsubmitevent like so:
禁用按钮是一种解决方案，但可能会给只是按 Enter 键提交表单的键盘用户带来问题。在这种情况下，按钮不会被禁用。万无一失的方法是onsubmit像这样处理事件：
(function () {
var allowSubmit = true;
frm.onsubmit = function () {
if (allowSubmit)
allowSubmit = false;
else
return false;
}
})();
(well, as sure-fire as you can get with JS enabled anyway). You could disabled the button as a visual confirmation to the end user that the form can only be submit once too.
（好吧，无论如何你都可以在启用 JS 的情况下获得）。您可以禁用该按钮，作为向最终用户确认表单也只能提交一次的视觉确认。
回答by Zoidberg
<input type="submit" onclick="this.disabled = true" value="Save"/>
回答by T.J. Crowder
I love the simplicity and directness of Zoidberg's answer.
我喜欢Zoidberg 回答的简单和直接。
But if you want to hook up that handler using code rather than markup (some people prefer to keep markup and code completely separated), here it is using Prototype:
但是，如果您想使用代码而不是标记来连接该处理程序（有些人更喜欢将标记和代码完全分开），这里使用的是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;
}
or you could use anonymous functions (I'm not a fan of them):
或者你可以使用匿名函数（我不喜欢它们）：
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;
});
});
Doing it using jQuerywill look very similar.
使用jQuery做这件事看起来非常相似。
回答by pungoyal
If you are using Rails with ujs, then have a look at disable_within http://api.rubyonrails.org/classes/ActionView/Helpers/FormTagHelper.html#method-i-submit_tag
如果您在使用Rails与UJS，然后看看disable_with在http://api.rubyonrails.org/classes/ActionView/Helpers/FormTagHelper.html#method-i-submit_tag
回答by user3024034
in chrome use this:
在 chrome 中使用这个：
<input type="submit" onclick="this.form.submit();this.disabled = true;" value="Save"/>
回答by tecla
You can add the next script to your 'layout page' (to be rendered on all the pages globally).
您可以将下一个脚本添加到您的“布局页面”（在全局所有页面上呈现）。
<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>
Then, each time a form is submited, the submit buttons are disabled. (The submit button(s) are re-enabled when loading the page.)
然后，每次提交表单时，提交按钮都会被禁用。（加载页面时重新启用提交按钮。）
If you are using a validation framework (like jQuery Validation), it is probably that you need to re-enable the submit button(s) when a validation fails also. (because the form validation failure makes that the submit be canceled).
如果您正在使用验证框架（如 jQuery 验证），则可能需要在验证失败时重新启用提交按钮。（因为表单验证失败导致提交被取消）。
If you are using jQuery Validation, you can detect the form invalidation (form submition cancellation) adding this:
如果您使用 jQuery 验证，您可以检测表单失效（表单提交取消），添加以下内容：
$('form').bind('invalid-form.validate', function () {
$(':submit').removeAttr('disabled'); //re-enable on form invalidation
});
Then if a form validation fails, the submit button(s) is/are enabled again.
然后，如果表单验证失败，则再次启用提交按钮。
回答by Faheel
One solution is to not use an <input>as the submit button, but instead a <div>(or <span>) styled as a button, having an onclickattribute:
一种解决方案是不使用 an<input>作为提交按钮，而是将 a <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>
And the submitOncefunction would first remove the onclickattribute and then submit the form:
该submitOnce函数将首先删除该onclick属性，然后提交表单：
function submitOnce() {
document.getElementById('submit-button').removeAttribute('onclick');
document.getElementById('my-form').submit();
}
回答by Chad
I know this is old, but rather than disable, just hide the button, you can't click what you can't see.
我知道这是旧的，但与其禁用，不如隐藏按钮，您无法单击看不到的内容。
<input type="submit" onclick="this.style.visibility = 'hidden'" value="Save"/>
回答by user3314233
if you are use form submit / post in PHP then use this code
如果您在 PHP 中使用表单提交/发布，则使用此代码
onclick="disableMe();" in type="submit"
its submit button code
它的提交按钮代码
<input name="bt2" type="submit" onclick="disableMe();" id="bt2" style="width:50px;height:30px; margin-left:30px;" value="Select" />
回答by Brad Vanderbush
Best way I found this to work best is if all information is correct on the form then add the attribute to the submit button. Incase user needs to comeback and fill out form again with correct information.
我发现此方法最有效的最佳方法是，如果表单上的所有信息都正确，则将属性添加到提交按钮。Incase用户需要回来并用正确的信息再次填写表格。
document.querySelector('.btn').addEventListener('submit',function(){
if(input.value){
this.setAttribute("disabled", "true")
}
};
