JSfiddle : CODE
I was trying to send the info with 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 ....
JSfiddle : CODE
I was trying to send the info with 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 ....
Share Improve this question edited Jul 5, 2012 at 20:39 Max Hudson 10.2k15 gold badges60 silver badges110 bronze badges asked Jul 5, 2012 at 20:33 AbudeAbude 2,1628 gold badges36 silver badges60 bronze badges 4-
Maybe your problem is in your server-side code. Also, you don't need to
return true, it's unnecessary. And instead ofattr()useprop()sincedisabledis a property not an attribute so.prop('disabled', true)– elclanrs Commented Jul 5, 2012 at 20:37 -
i have JQuery 1.2.6 , i can't update at the moment, so i'm using
.attr, i know that shouldn't usereturn truebut i'm really out of ideas :( – Abude Commented Jul 5, 2012 at 20:38 - Why are you using 1.2.6? That version is over 4 years old. – EkoostikMartin Commented Jul 5, 2012 at 20:49
- It seems to work fine if your form has an action. – Chris Pratt Commented Jul 5, 2012 at 20:56
4 Answers
Reset to default 7You 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 (i.e. submitting the form).
$("form").on("submit", function(e){
e.preventDefault();
// Send the form data using .ajax() or .post()
});
If someone (e.g. 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).
The above helps when a form is sent using AJAX and also as a regular form submit. 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 (puter) time as BalusC pointed out in his answer:
$(document).ready(function () {
$("form").submit(function () {
setTimeout(function () {
$('input[type=submit]').attr('disabled', 'disabled');
}, 50);
});
});
this resolved my problem : https://stackoverflow./a/2830812/1436998
$(document).ready(function(){
$("form").submit(function(){
setTimeout(function() {
$('input').attr('disabled', 'disabled');
$('a').attr('disabled', 'disabled');
}, 50);
})
});
You can also use
$("form").beforeSubmit(function(){ // function body here.... });
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. 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./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>