JSfiddle：代码
我试图用 POST 发送信息；然后我添加了此代码以在提交一次后禁用该按钮：
$('form').submit(function(){
$('input[type=submit]', this).attr('disabled', 'disabled');
return true;
});
但是现在：按钮被禁用并且页面被重新加载但表单没有提交信息......请提供任何解决方案
PS：我需要一个像上面代码这样的通用解决方案，我的表单没有id，因为我需要将此函数应用于我的所有表单......
您正在将事件传递给该处理程序函数。如果您使用.ajax()POST 请求提交表单（考虑使用.post()），则需要防止默认行为（即提交表单）。
$("form").on("submit", function(e){
e.preventDefault();
// Send the form data using .ajax() or .post()
});
如果有人（例如几周前的我）建议把return false你的函数放在末尾，请他们参考文章jQuery Events: Stop (Mis)Using Return False（近两年前）。
当使用 AJAX 发送表单以及作为常规表单提交时，上述内容会有所帮助。但看起来你的问题是两次点击提交按钮（偶然或故意）。正如您在回答中指出的那样，解决方案是在短（人类）/长（计算机）时间后停用按钮，正如BalusC 在他的回答中指出的那样：
$(document).ready(function () {
$("form").submit(function () {
setTimeout(function () {
$('input[type=submit]').attr('disabled', 'disabled');
}, 50);
});
});
这解决了我的问题： https ://stackoverflow.com/a/2830812/1436998
$(document).ready(function(){
$("form").submit(function(){
setTimeout(function() {
$('input').attr('disabled', 'disabled');
$('a').attr('disabled', 'disabled');
}, 50);
})
});
我遇到过无法抗拒两次、三次或多次点击的人的问题。这可能会给您带来各种问题。这就是我使用 Jquery 解决多次提交的方法。如果对您有帮助，请随意复制。复制粘贴进行测试。如果你愿意，可以疯狂地点击。此表格只提交一次！
<%@LANGUAGE="VBSCRIPT"%>
<%Option Explicit%>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style type="text/css">
body{
height:100%;
width:100%;
}
h2 {
font-family:sans-serif;
font-style:italic;
font-size:1.4em;
color:#777;
}
#tekst {
padding:6px;
border:none;
border-radius:4px;
background-color:#666;
color:#fff;
opacity:1;
}
.loading {
opacity:0.7;
background-color:#ddd;
position:fixed;
width:100%;
height:100%;
top:0px;
left:0px;
z-index:1 /*(top)*/;
visibility:hidden
}
.loading-content {
width: 240px; /* or to your liking.*/
height: 100px;
text-align:center;
margin: 0 auto;
padding-top:25px;
position: relative;
top:20%;
background-color:#900;
font-size:1.1em;
font-weight:bold;
font-style:italic;
font-family:sans-serif;
color:#eee;
opacity:1;
z-index:2; /*above . loading*/
user-select: none; /* Non-prefixed version, currently
supported by Chrome, Edge, Opera and Firefox */
}
#upload {
background-color:#000;
color:#fff;
font-style:italic;
font-weight:bold;
border-radius:8px;
border-color:#000;
padding:3px 8px;
cursor:pointer;
z-index:-1;
}
p {
display:inline-block;
font-size:1em;
font-style:italic;
color:#555;
}
br {
line-height:40px;
}
</style>
<title>test</title>
</head>
<body>
<%
'this is VB script, but use whatever language you want to receive the submitted form
dim tekst
tekst=Request.Form("tekst")
if tekst <> "" then
Response.Write("<h2>" & tekst & " (Submitted only once).</h2>")
end if
%>
<div class="loading">
<div class="loading-content"></div>
</div>
<form action="#" method="post" id="form1">
<input type="text" name="tekst" id="tekst" placeholder="Enter some text"/>
<input type="submit" value="Submit form" Id="upload" /> <p>Try and double or triple click to check, also during submit.</p>
</form>
<script type="text/javascript">
$(function () {
$(":submit").on('click', function (e) { //this happens when you click, doubleclick or whatever how many clicks you do:
e.preventDefault(); //first we prevent a submit to happen
$(':submit').attr('disabled', 'disabled'); // then disable the submit button
$('.loading').css('visibility', 'visible'); //now the page load message is made visible
$('.loading-content').html("Page is loading.<br>Please wait a second.");
$('.loading').fadeOut(3000); // you do this your own way of course
setTimeout(function () { $('#form1').submit();}, 2000); //Here is the important clue. Now, submit the form, with or without a message . Because of the delay, doubleclicks are filtered out and the form submits only once.
});
});
</script>
</body>
</html>
你也可以使用
$("form").beforeSubmit(function(){ // 函数体在这里.... });