jQuery 单击后禁用提交按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9378609/
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
Disabling a submit button after one click
提问by GregM
Here's my code :
这是我的代码：
<form name='frm' id='frm' action='load.asp' method='post' onSubmit='return OnSubmit(this)' style='margin-top:15px'>
<input type='submit' name='send' id='send' onclick="this.disabled=true;return true;" value='Send' title='test'>
</form>
I want my onsubmit function to be executed and I want the page to be submited. In my website, no submit and no function
我希望我的 onsubmit 函数被执行，我希望页面被提交。在我的网站中，没有提交也没有功能
I've tried to duplicate it here, but the form seems to be posted and my function never gets executed ... http://jsfiddle.net/V7B3T/1/
我试图在这里复制它，但表单似乎已发布并且我的函数从未被执行...... http://jsfiddle.net/V7B3T/1/
And I don't know when I should reactivate the button.
我不知道什么时候应该重新激活按钮。
Should I do it in the document.ready, or in the onSubmit function ?
我应该在 document.ready 中还是在 onSubmit 函数中执行此操作？
So if someone can fixed the fiddle :) and after that I'll compare it with my code. I think :S I'm lost
因此，如果有人可以修复小提琴 :) 之后我会将其与我的代码进行比较。我想 :S 我迷路了
Thanks all
谢谢大家
回答by Bogdan
If you want to validate the form or make any changes the before submitting and only submit if the form is valid you can do something like this:
如果您想在提交之前验证表单或进行任何更改，并且仅在表单有效时提交，您可以执行以下操作：
<form id="frm" action="load.asp" method="post" enctype="multipart/form-data">
<input type="submit" name="send" id="send" value="Send" title="test">
</form>
and the JavaScript code:
和 JavaScript 代码：
$('#frm').bind('submit', function (e) {
var button = $('#send');
// Disable the submit button while evaluating if the form should be submitted
button.prop('disabled', true);
var valid = true;
// Do stuff (validations, etc) here and set
// "valid" to false if the validation fails
if (!valid) {
// Prevent form from submitting if validation failed
e.preventDefault();
// Reactivate the button if the form was not submitted
button.prop('disabled', false);
}
});
Here's a working fiddle.
这是一个工作小提琴。
回答by powerbuoy
I would definitely move that code to external JS (and CSS) files where it belongs, but this should work:
我肯定会将该代码移动到它所属的外部 JS（和 CSS）文件中，但这应该有效：
onclick="this.disabled=true;this.parentNode.submit();"
Since you're disabling the submit-button onclick it will be disabled once the actual form submission click takes place (onclick happens before that). Submitting the form with JS should do the trick though.
由于您禁用了提交按钮 onclick，一旦实际的表单提交点击发生（onclick 在此之前发生），它将被禁用。不过，使用 JS 提交表单应该可以解决问题。
Edit: Regarding re-enabling the button, that would have to happen after your OnSubmit()function has run I guess.
编辑：关于重新启用按钮，OnSubmit()我猜这必须在您的功能运行后发生。
回答by Anthony Grist
If your form actually does a postback, you're effectively changing page, and therefore won't need to worry about re-enabling your button (that will happen once the page has loaded).
如果您的表单实际上进行了回发，则您实际上是在更改页面，因此无需担心重新启用按钮（页面加载后会发生这种情况）。
Also, since you're using jQuery, you may as well use it properly and separate out your HTML markup and Javascript by attaching event handlers using the jQuery functions, and not onclick, onsubmit, etc attributes on HTML elements.
此外，由于你使用jQuery，你可能也正确地使用它，并通过使用jQuery函数连接的事件处理程序分离出来，你的HTML标记和Javascript，而不是onclick，onsubmit等属性上的HTML元素。
Updated HTML:
更新的 HTML：
<form name='frm' id='frm' action='http://jsfiddle.net/' enctype='multipart/form-data' method='post' style='margin-top:15px'>
<input type='submit' name='send' id='send' value='Send' title='test'>
</form>
Updated Javascript:
更新的 Javascript：
function submitForm(form) {
alert("submitted");
}
$('#send').click(function(e) {
this.disabled = true;
});
$('#frm').submit(function(e) {
submitForm(this);
});
You'll need to wrap that in a $(document).ready(function() {...});call for use on an actual page - I left it out because jsFiddle executes any provided Javascript onLoad anyway.
您需要将其包装在$(document).ready(function() {...});实际页面上的调用中 - 我将其省略，因为 jsFiddle 无论如何都会执行任何提供的 Javascript onLoad。
回答by Episodex
If you don't want to submit the page this should do the trick:
如果您不想提交页面，这应该可以解决问题：
onclick="this.disabled=true;return false;"
