避免在我的表单 JQuery 中重复提交
[英]Avoid double submit in my form JQuery
问题描述
I was trying to send the info with POST;
我试图用 POST 发送信息； then I added this code to disable the button after submitting one time:然后我添加了这段代码以在提交一次后禁用该按钮：
$('form').submit(function(){
$('input[type=submit]', this).attr('disabled', 'disabled');
return true;
});
but NOW : the button is disabled and the page is reloaded but the form is not submitting the info... any solution please但是现在：按钮被禁用并且页面被重新加载但是表单没有提交信息......请提供任何解决方案
PS: I need a general solution like the code above, my form doesn't have an id, because I need to apply this function to all my forms.... PS：我需要一个像上面代码一样的通用解决方案，我的表单没有 id，因为我需要将这个函数应用于我所有的表单....
4 个解决方案
解决方案1
7 2012-07-05 20:39:39
You are getting the event passed into that handler function.您正在将事件传递到该处理程序函数中。 If you are submitting your form using an .ajax() POST request (consider using .post() ), you would need to prevent the default behaviour (ie submitting the form).如果您使用.ajax() POST 请求提交表单（考虑使用.post() ），您需要防止默认行为（即提交表单）。
$("form").on("submit", function(e){
e.preventDefault();
// Send the form data using .ajax() or .post()
});
If someone (eg me some weeks ago) suggests to put return false at the end of your function, refer them to the article jQuery Events: Stop (Mis)Using Return False (from nearly two years ago).如果有人（例如几周前的我）建议将return false放在函数的末尾，请让他们参阅文章jQuery Events：Stop (Mis)Using Return False （近两年前）。
The above helps when a form is sent using AJAX and also as a regular form submit.当使用 AJAX 发送表单以及作为常规表单提交时，以上内容会有所帮助。 But as it seems your problem is hitting the submit button twice (by accident or on purpose).但看起来你的问题是点击提交按钮两次（无意或故意）。 As you pointed out in your answer, the solution to this is deactivating the button after a short (human) / long (computer) time as BalusC pointed out in his answer :正如您在回答中指出的那样，正如 BalusC 在他的回答中指出的那样，解决方案是在短（人）/长（计算机）时间后停用按钮：
$(document).ready(function () {
$("form").submit(function () {
setTimeout(function () {
$('input[type=submit]').attr('disabled', 'disabled');
}, 50);
});
});
解决方案2
0 已采纳 2012-07-05 21:06:28
this resolved my problem: https://stackoverflow.com/a/2830812/1436998这解决了我的问题： https ://stackoverflow.com/a/2830812/1436998
$(document).ready(function(){
$("form").submit(function(){
setTimeout(function() {
$('input').attr('disabled', 'disabled');
$('a').attr('disabled', 'disabled');
}, 50);
})
});
解决方案3
0 2020-08-09 09:32:26
I have had issues with people who cannot resist double or triple or multiple clicking.我遇到过无法抗拒双击、三次或多次点击的人。 This can can cause all sorts of problems for you.这可能会给您带来各种各样的问题。 This is how I solved mutiple submit using Jquery.这就是我使用 Jquery 解决多重提交的方法。 Feel free to copy it if it can help you.如果对您有帮助，请随时复制。 Copy and paste to test.复制粘贴进行测试。 Click like mad if you want.如果需要，请疯狂点击。 This form submits only once!此表单仅提交一次！
<%@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>
解决方案4
0 2020-08-09 09:35:30
You can also use您也可以使用
$("form").beforeSubmit(function(){ // function body here.... });
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.