Dev*_*v P 28 javascript jquery submit button
我有以下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>
按下时,提交按钮会在按下时被禁用.但是一旦按下它似乎没有执行提交.如果我删除了jquery以禁用该按钮,则该按钮会正常执行提交.
如何在执行提交后才禁用该按钮？上面的当前jquery似乎与提交操作冲突.
任何解决此问题的建议都会非常有帮助.
pvn*_*ula 33
在提交事件中添加禁用部分.
$(document).ready(function () {
$("#yourFormId").submit(function () {
$(".submitBtn").attr("disabled", true);
return true;
});
});
ehe*_*enr 19
我遇到了同样的问题.客户可以提交表单,然后多个电子邮件地址将收到一封邮件.如果页面的响应时间过长,有时按钮被按下两次甚至更多次.
我尝试禁用onsubmit处理程序中的按钮,但表单根本没有提交.上面的解决方案工作可能很好,但对我来说这有点太棘手了,所以我决定尝试别的东西.
在提交按钮的左侧,我放置了第二个按钮,该按钮未显示且在启动时被禁用:
<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>
在附加到表单的onsubmit处理程序中,隐藏了"真实"提交,并显示"假"提交,并显示消息正在发送的消息.
function checkinput // submit handler
{
..
...
$("#btnverzenden").hide(); <= real submit button will be hidden
$("#btnverzenden2").show(); <= fake submit button gets visible
...
..
}
这对我们有用.我希望它会对你有所帮助.
Tuk*_*una 12
嘿,这工作,
$(function(){
$(".submitBtn").click(function () {
$(".submitBtn").attr("disabled", true);
$('#yourFormId').submit();
});
});
该解决方案具有在移动设备上工作并且非常简单的优点:
<form ... onsubmit="myButtonValue.disabled = true; return true;">
这是编辑过的脚本,希望它有所帮助,
<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>
使用对我有用的 setTimeout 进行测试，我可以提交我的表单，参考这个答案/sf/answers/54584981/
$(document).ready(function () {
$("#btnSubmit").click(function () {
setTimeout(function () { disableButton(); }, 0);
});
function disableButton() {
$("#btnSubmit").prop('disabled', true);
}
});
小智 6
正如许多人指出的那样，禁用提交按钮会产生一些负面影响（至少在 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');
}
});
阅读评论，似乎这些解决方案在浏览器之间并不一致。然后决定思考 10 年前 jQuery 和事件函数绑定出现之前我会如何做到这一点。
这是我的复古时髦解决方案：
<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>
主要的区别在于，我依赖于通过在提交处理程序上返回 false 来停止表单提交的能力，并且我使用的是全局标志变量 - 这会让我直接下地狱！
但从好的方面来说，我无法想象任何浏览器兼容性问题 - 嘿，它甚至可能在 Netscape 中工作！