Javascript 单击后如何禁用提交按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3366828/
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 disable submit button once it has been clicked?
提问by maas
I have a submit button at the end of the form.
我在表单末尾有一个提交按钮。
I have added the following condition to the submit button:
我在提交按钮中添加了以下条件：
onClick="this.disabled=true;
this.value='Sending…';
this.form.submit();"
But when it moves to the next page, the parameters did not pass and null values are passed.
但是当它移动到下一页时，参数没有传递，而是传递了空值。
回答by Andreas K?berle
You should first submit your form and then change the value of your submit:
您应该首先提交表单，然后更改提交的值：
onClick="this.form.submit(); this.disabled=true; this.value='Sending…'; "
回答by migajek
Probably you're submitting the form twice.
Remove the this.form.submit()or add return falseat the end.
可能您提交了两次表单。删除this.form.submit()或添加return false在末尾。
you should end up with onClick="this.disabled=true; this.value='Sending…';"
你应该结束 onClick="this.disabled=true; this.value='Sending…';"
回答by maas
tested on IE11, FF53, GC58 :
在 IE11、FF53、GC58 上测试：
onclick="var e=this;setTimeout(function(){e.disabled=true;},0);return true;"
回答by AlexV
Disabled HTML forms elements aren't sent along with the post/get values when you submit the form. So if you disable your submit button once clicked and that this submit button have the nameattribute set, It will not be sent in the post/get values since the element is now disabled. This is normal behavior.
提交表单时，禁用的 HTML 表单元素不会与 post/get 值一起发送。因此，如果您在单击后禁用提交按钮并且此提交按钮name设置了属性，则它不会在 post/get 值中发送，因为该元素现在已禁用。这是正常行为。
Oneof the way to overcome this problem is using hidden form elements.
一来解决这个问题的方法是使用隐藏的表单元素。
回答by A-Sharabiani
You need to disable the button in the onsubmitevent of the <form>:
您需要在禁用按钮onsubmit的事件<form>：
<form action='/' method='POST' onsubmit='disableButton()'>
<input name='txt' type='text' required />
<button id='btn' type='submit'>Post</button>
</form>
<script>
function disableButton() {
var btn = document.getElementById('btn');
btn.disabled = true;
btn.innerText = 'Posting...'
}
</script>
Note: this way if you have a form element which has the requiredattribute will work.
注意：如果您有一个具有该required属性的表单元素，则这种方式将起作用。
回答by Frenchi In LA
the trick is to delayed the button to be disabled, and submit the form you can use
window.setTimeout('this.disabled=true',0);yes even with 0 MS is working
诀窍是延迟禁用按钮，并提交您可以使用的表单，
window.setTimeout('this.disabled=true',0);即使 0 MS 正在工作
回答by Manie
Using JQuery, you can do this..
使用 JQuery，你可以做到这一点..
$("#submitbutton").click(
function() {
alert("Sending...");
window.location.replace("path to url");
}
);
回答by Mitch Dempsey
I don't think you need this.form.submit(). The disabling code should run, then it will pass on the click which will click the form.
我认为你不需要this.form.submit()。禁用代码应该运行，然后它将传递单击表单。
回答by BalusC
If you disable the button, then its name=value pair will indeed not be sent as parameter. But the remnant of the parameters should be sent (as long as their respective input elements and the parent form are not disabled). Likely you're testing the button only or the other input fields or even the form are disabled?
如果禁用该按钮，则其名称=值对确实不会作为参数发送。但是应该发送剩余的参数（只要它们各自的输入元素和父表单没有被禁用）。可能您只是在测试按钮或其他输入字段甚至表单被禁用？
回答by stephen.hanson
Here's a drop-in example that expands on Andreas K?berle's solution. It uses jQuery for the event handler and the document ready event, but those could be switched to plain JS:
这是一个插入式示例，它扩展了 Andreas K?berle 的解决方案。它使用 jQuery 作为事件处理程序和文档就绪事件，但这些可以切换到普通的 JS：
(function(document, $) {
$(function() {
$(document).on('click', '[disable-on-click], .disable-on-click', function() {
var disableText = this.getAttribute("data-disable-text") || 'Processing...';
if(this.form) {
this.form.submit();
}
this.disabled = true;
if(this.tagName === 'BUTTON') {
this.innerHTML = disableText;
} else if(this.tagName === 'INPUT') {
this.value = disableText;
}
});
});
})(document, jQuery);
It can then be used in HTML like this:
然后可以像这样在 HTML 中使用它：
<button disable-on-click data-disable-text="Saving...">Click Me</button>
<button class="disable-on-click">Click Me</button>
<input type="submit" disable-on-click value="Click Me" />
