JQuery Disable Submit Button on Click to Prevent Multiple Form Submits
In this small post, we will lean how to disable button on click to prevent multiple form submits in jquery. we can stop duplicate form submission using jquery. we can easily disabled button on click event in jquery for prevent duplicate form submit.
Sometime we are working with php or any framework like laravel codeigniter and you used form with one submit button. we have form is large and big than maybe take time to submitting process so user can click many times but actual form submit again and again.
So we must have to prevent multiple form submits like prevent double click on submit button. so how we can prevent this. we can do it using jquery. when you click on submit button than it should be disabled so it's click again.
I written example for that, you can use bellow php file. you can see bellow full code. You can also check this small jquery code and full code.
$('#myFormId').submit(function(){
$("#myButtonID", this)
.html("Please Wait...")
.attr('disabled', 'disabled');
return true;
});
Here is a full example, you can see.
Example:
<!DOCTYPE html>
<html>
<head>
<title>jQuery disable submit button on click to prevent multiple form submits - ItSolutionStuff.com</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<form id="myFormId">
<input type="text" name="name" placeholder="Name...">
<input type="text" name="email" placeholder="Email...">
<button type="submit" id="myButtonID">Submit</button>
</form>
<script type="text/javascript">
$('#myFormId').submit(function(){
$("#myButtonID", this)
.html("Please Wait...")
.attr('disabled', 'disabled');
return true;
});
</script>
</body>
</html>
I hope it can help you...
