Javascript 禁用表单提交上的提交按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5691054/
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
Disable submit button on form submit
提问by markzzz
I wrote this code to disable submit buttons on my website after the click:
我编写了此代码以在单击后禁用我网站上的提交按钮：
$('input[type=submit]').click(function(){
$(this).attr('disabled', 'disabled');
});
Unfortunately, it doesn't send the form. How can I fix this?
不幸的是，它不会发送表格。我怎样才能解决这个问题？
EDITI'd like to bind the submit, not the form :)
编辑我想绑定提交，而不是表单:)
回答by Jared Farrish
Do it onSubmit():
这样做onSubmit()：
$('form#id').submit(function(){
$(this).find(':input[type=submit]').prop('disabled', true);
});
What is happening is you're disabling the button altogether before it actually triggers the submit event.
发生的事情是您在实际触发提交事件之前完全禁用按钮。
You should probably also think about naming your elements with IDs or CLASSes, so you don't select all inputs of submit type on the page.
您可能还应该考虑使用 ID 或 CLASSes 命名您的元素，这样您就不会选择页面上所有提交类型的输入。
Demonstration:http://jsfiddle.net/userdude/2hgnZ/
演示：http : //jsfiddle.net/userdude/2hgnZ/
(Note, I use preventDefault()and return falseso the form doesn't actual submit in the example; leave this off in your use.)
（请注意，我使用了preventDefault()andreturn false所以表单在示例中没有实际提交；在您使用时不要使用它。）
回答by Baig
Specifically if someone is facing problem in Chrome:
特别是如果有人在以下方面面临问题Chrome：
What you need to do to fix this is to use the onSubmittag in the <form>element to set the submit button disabled. This will allow Chrome to disable the button immediately after it is pressed and the form submission will still go ahead...
您需要做的就是使用元素中的onSubmit标签<form>来设置提交按钮disabled。这将允许 Chrome 在按下按钮后立即禁用该按钮，并且表单提交仍将继续...
<form name ="myform" method="POST" action="dosomething.php" onSubmit="document.getElementById('submit').disabled=true;">
<input type="submit" name="submit" value="Submit" id="submit">
</form>
回答by Valamas
Disabled controls do not submit their valueswhich does not help in knowing if the user clicked save or delete.
禁用的控件不提交它们的值，这无助于了解用户是否单击了保存或删除。
So I store the button value in a hidden which does get submitted. The name of the hidden is the same as the button name. I call all my buttons by the name of button.
所以我将按钮值存储在一个隐藏中，它确实被提交了。隐藏的名称与按钮名称相同。我将所有按钮都称为button.
E.g. <button type="submit" name="button" value="save">Save</button>
例如 <button type="submit" name="button" value="save">Save</button>
Based on this I found here. Just store the clicked button in a variable.
基于此，我找到了here。只需将单击的按钮存储在变量中。
$(document).ready(function(){
var submitButton$;
$(document).on('click', ":submit", function (e)
{
// you may choose to remove disabled from all buttons first here.
submitButton$ = $(this);
});
$(document).on('submit', "form", function(e)
{
var form$ = $(this);
var hiddenButton$ = $('#button', form$);
if (IsNull(hiddenButton$))
{
// add the hidden to the form as needed
hiddenButton$ = $('<input>')
.attr({ type: 'hidden', id: 'button', name: 'button' })
.appendTo(form$);
}
hiddenButton$.attr('value', submitButton$.attr('value'));
submitButton$.attr("disabled", "disabled");
}
});
Here is my IsNullfunction. Use or substitue your own version for IsNull or undefined etc.
这是我的IsNull功能。使用或替换您自己的 IsNull 或 undefined 版本等。
function IsNull(obj)
{
var is;
if (obj instanceof jQuery)
is = obj.length <= 0;
else
is = obj === null || typeof obj === 'undefined' || obj == "";
return is;
}
回答by Zia
回答by Shreekar Patel
This should take care of it in your app.
这应该在您的应用程序中处理它。
$(":submit").closest("form").submit(function(){
$(':submit').attr('disabled', 'disabled');
});
回答by sriram
A more simplier way. I've tried this and it worked fine for me:
更简单的方法。我试过这个，它对我来说很好：
$(':input[type=submit]').prop('disabled', true);
回答by Pablo Pazos
Your code actually works on FF, it doesn't work on Chrome.
您的代码实际上适用于 FF，但不适用于 Chrome。
This works on FF and Chrome.
这适用于 FF 和 Chrome。
$(document).ready(function() {
// Solution for disabling the submit temporarily for all the submit buttons.
// Avoids double form submit.
// Doing it directly on the submit click made the form not to submit in Chrome.
// This works in FF and Chrome.
$('form').on('submit', function(e){
//console.log('submit2', e, $(this).find('[clicked=true]'));
var submit = $(this).find('[clicked=true]')[0];
if (!submit.hasAttribute('disabled'))
{
submit.setAttribute('disabled', true);
setTimeout(function(){
submit.removeAttribute('disabled');
}, 1000);
}
submit.removeAttribute('clicked');
e.preventDefault();
});
$('[type=submit]').on('click touchstart', function(){
this.setAttribute('clicked', true);
});
});
</script>
回答by John Langford
The following worked for me:
以下对我有用：
var form_enabled = true;
$().ready(function(){
// allow the user to submit the form only once each time the page loads
$('#form_id').on('submit', function(){
if (form_enabled) {
form_enabled = false;
return true;
}
return false;
});
});
This cancels the submit event if the user tries to submit the form multiple times (by clicking a submit button, pressing Enter, etc.)
如果用户尝试多次提交表单（通过单击提交按钮、按 Enter 等），这将取消提交事件。
回答by Michael Chourdakis
I have been using blockUI to avoid browser incompatibilies on disabled or hidden buttons.
我一直在使用 blockUI 来避免浏览器对禁用或隐藏按钮的不兼容。
http://malsup.com/jquery/block/#element
http://malsup.com/jquery/block/#element
Then my buttons have a class autobutton:
然后我的按钮有一个类自动按钮：
$(".autobutton").click(
function(event) {
var nv = $(this).html();
var nv2 = '<span class="fa fa-circle-o-notch fa-spin" aria-hidden="true"></span> ' + nv;
$(this).html(nv2);
var form = $(this).parents('form:first');
$(this).block({ message: null });
form.submit();
});
Then a form is like that:
那么一个表格是这样的：
<form>
....
<button class="autobutton">Submit</button>
</form>
回答by Abhijit Patra
Button Code
按钮代码
<button id="submit" name="submit" type="submit" value="Submit">Submit</button>
Disable Button
禁用按钮
if(When You Disable the button this Case){
$(':input[type="submit"]').prop('disabled', true);
}else{
$(':input[type="submit"]').prop('disabled', false);
}
Note: You Case may Be Multiple this time more condition may need
注意：这次您的案例可能是多个，可能需要更多条件
