jQuery 仅在提交后禁用提交按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17106885/
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 ONLY after submit
提问by Dev P
I have the following HTML and jquery:
我有以下 HTML 和 jquery：
<html dir="ltr" lang="en">
<head>
</head>
<body>
<h2>Test disabling submit button for 1 minute...</h2>
<br/>
<p style="text-align:center">
<form id="yourFormId" name="yourFormId" method="post" action="#">
<input type="submit" class="submitBtn" value="I Accept"/>
</form>
</p>
<!--script to disable the submit button -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function () {
$(".submitBtn").click(function () {
$(".submitBtn").attr("disabled", true);
return true;
});
});
</script>
<!--script ends here-->
</body>
</html>
As its stands the submit button gets disabled when pressed. However once pressed it does not seem perform the submit. If I removed the jquery to disable the button, the button then performs the submit normally.
就其立场而言，提交按钮在按下时被禁用。然而，一旦按下它似乎不会执行提交。如果我删除了 jquery 以禁用按钮，则该按钮会正常执行提交。
How can I disable the button only after it has performed the submit? the current jquery above seems to conflict with the submit operation.
如何仅在执行提交后禁用该按钮？上面当前的 jquery 似乎与提交操作冲突。
Any suggestions to resolve this issue would be extremely helpful.
任何解决此问题的建议都将非常有帮助。
回答by pvnarula
Add the disable part in the submit event.
在提交事件中添加禁用部分。
$(document).ready(function () {
$("#yourFormId").submit(function () {
$(".submitBtn").attr("disabled", true);
return true;
});
});
回答by eheydenr
I faced the same problem. Customers could submit a form and then multiple e-mail addresses will receive a mail message. If the response of the page takes too long, sometimes the button was pushed twice or even more times..
我遇到了同样的问题。客户可以提交一个表格，然后多个电子邮件地址将收到一封邮件。如果页面的响应时间太长，有时按钮会被按下两次甚至更多次。
I tried disable the button in the onsubmit handler, but the form wasn't submitted at all. Above solutions work probably fine, but for me it was a little bit too tricky, so I decided to try something else.
我尝试禁用 onsubmit 处理程序中的按钮，但根本没有提交表单。以上解决方案可能工作得很好，但对我来说有点太棘手了，所以我决定尝试其他方法。
To the left side of the submit button, I placed a second button, which is not displayed and is disabled at start up:
在提交按钮的左侧，我放置了第二个按钮，该按钮未显示且在启动时禁用：
<button disabled class="btn btn-primary" type=button id="btnverzenden2" style="display: none"><span class="glyphicon glyphicon-refresh"></span> Sending mail</button>
<button class="btn btn-primary" type=submit name=verzenden id="btnverzenden">Send</button>
In the onsubmit handler attached to the form, the 'real' submit is hidden and the 'fake' submit is shown with a message that the messages are being sent.
在附加到表单的 onsubmit 处理程序中，“真实”提交是隐藏的，而“假”提交则显示消息正在发送。
function checkinput // submit handler
{
..
...
$("#btnverzenden").hide(); <= real submit button will be hidden
$("#btnverzenden2").show(); <= fake submit button gets visible
...
..
}
This worked for us. I hope it will help you.
这对我们有用。我希望它会帮助你。
回答by Tukuna
Hey this works,
嘿，这有效，
$(function(){
$(".submitBtn").click(function () {
$(".submitBtn").attr("disabled", true);
$('#yourFormId').submit();
});
});
回答by mcastle
This solution has the advantages of working on mobile and being quite simple:
此解决方案具有在移动设备上工作且非常简单的优点：
<form ... onsubmit="myButtonValue.disabled = true; return true;">
回答by Nil'z
This is the edited script, hope it helps,
这是编辑好的脚本，希望它有帮助，
<script type="text/javascript">
$(function(){
$("#yourFormId").on('submit', function(){
return false;
$(".submitBtn").attr("disabled",true); //disable the submit here
//send the form data via ajax which will not relaod the page and disable the submit button
$.ajax({
url : //your url to submit the form,
data : { $("#yourFormId").serializeArray() }, //your data to send here
type : 'POST',
success : function(resp){
alert(resp); //or whatever
},
error : function(resp){
}
});
})
});
</script>
回答by Carlos E
Test with a setTimeout, that worked for me and I could submit my form, refers to this answer https://stackoverflow.com/a/779785/5510314
使用对我有用的 setTimeout 进行测试，我可以提交我的表单，参考这个答案https://stackoverflow.com/a/779785/5510314
$(document).ready(function () {
$("#btnSubmit").click(function () {
setTimeout(function () { disableButton(); }, 0);
});
function disableButton() {
$("#btnSubmit").prop('disabled', true);
}
});
回答by Gordon Rouse
Reading the comments, it seems that these solutions are not consistent across browsers. Decided then to think how I would have done this 10 years ago before the advent of jQuery and event function binding.
阅读评论，似乎这些解决方案在浏览器之间并不一致。然后决定思考 10 年前在 jQuery 和事件函数绑定出现之前我会如何做到这一点。
So here is my retro hipster solution:
所以这是我的复古时髦解决方案：
<script type="text/javascript">
var _formConfirm_submitted = false;
</script>
<form name="frmConfirm" onsubmit="if( _formConfirm_submitted == false ){ _formConfirm_submitted = true;return true }else{ alert('your request is being processed!'); return false; }" action="" method="GET">
<input type="submit" value="submit - but only once!"/>
</form>
The main point of difference is that I am relying on the ability to stop a form submitting through returning false on the submit handler, and I am using a global flag variable - which will make me go straight to hell!
主要区别在于我依赖于通过在提交处理程序上返回 false 来停止表单提交的能力，并且我使用了一个全局标志变量 - 这会让我直接下地狱！
But on the plus side, I cannot imagine any browser compatibility issues - hey, it would probably even work in Netscape!
但从好的方面来说，我无法想象任何浏览器兼容性问题 - 嘿，它甚至可能在 Netscape 中工作！
回答by MOH3N
My problem was solved when i add bindsection to my script file.
当我将bind部分添加到我的脚本文件时，我的问题解决了。
Totally i did this 2 steps :
我完全做了这两个步骤：
1 - Disable button and prevent double submitting :
1 - 禁用按钮并防止重复提交：
$('form').submit(function () {
$(this).find(':submit').attr('disabled', 'disabled');
});
2 - Enable submit button if validation error occurred :
2 - 如果发生验证错误，启用提交按钮：
$("form").bind("invalid-form.validate", function () {
$(this).find(':submit').prop('disabled', false);
});
回答by Mario Hendricks
As a number of people have pointed out, disabling the submit button has some negative side effects (at least in Chrome it prevents the name/value of the button pressed from being submitted). My solution was to simply add an attribute to indicate that submit has been requested, and then check for the presence of this attribute on every submit. Because I'm using the submit function, this is only called after all HTML 5 validation is successful. Here is my code:
正如许多人指出的那样，禁用提交按钮有一些负面影响（至少在 Chrome 中它会阻止提交按下按钮的名称/值）。我的解决方案是简单地添加一个属性来指示已请求提交，然后在每次提交时检查该属性是否存在。因为我使用的是 submit 函数，所以只有在所有 HTML 5 验证成功后才会调用它。这是我的代码：
$("form.myform").submit(function (e) {
// Check if we have submitted before
if ( $("#submit-btn").attr('attempted') == 'true' ) {
//stop submitting the form because we have already clicked submit.
e.preventDefault();
}
else {
$("#submit-btn").attr("attempted", 'true');
}
});
回答by kravits88
I put this in my global code to work on all submit buttons:
我把它放在我的全局代码中以处理所有提交按钮：
$("input[type='submit']").on("click", function (e) {
$(this).attr("disabled", true);
$(this).closest("form").submit()
});
