This short post will teach you how to disable a button upon click in jQuery to stop multiple form submissions. Jquery enables us to prevent the submission of duplicate forms. To avoid duplicate form submission, we can quickly stop a button’s on-click event in jQuery.
We occasionally use forms with a single submit button when dealing with PHP or another framework, such as Laravel CodeIgniter. The process of submitting our massive, lengthy form may take some time, so users may click numerous times before the form is actually submitted each time.
Therefore, it is necessary to prevent multiple form submissions as well as double-clicking the submit button. then, how do we stop this? Using jQuery, we can accomplish it. when you press the submission button,
You can use the php file below, which is a CLI written example for that. You can see the complete code below. You can also look at the complete code and this short jquery code.Again, click.
$('#myFormId').submit(function(){
$("#myButtonID", this)
.html("Please Wait...")
.attr('disabled', 'disabled');
return true;
});
Here is a full example, you can see.
<!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’m Abhishek, a DevOps, SRE, DevSecOps, and Cloud expert with a passion for sharing knowledge and real-world experiences. I’ve had the opportunity to work with Cotocus and continue to contribute to multiple platforms where I share insights across different domains:
-
DevOps School – Tech blogs and tutorials
-
Holiday Landmark – Travel stories and guides
-
Stocks Mantra – Stock market strategies and tips
-
My Medic Plus – Health and fitness guidance
-
TrueReviewNow – Honest product reviews
-
Wizbrand – SEO and digital tools for businesses
I’m also exploring the fascinating world of Quantum Computing.
Best Cardiac Hospitals Near You
Discover top heart hospitals, cardiology centers & cardiac care services by city.
Advanced Heart Care • Trusted Hospitals • Expert Teams
View Best Hospitals
[…] https://www.devopsconsulting.in/blog/how-can-i-disable-a-submit-button-using-jquery-to-prevent-multi… […]
[…] How can I disable a submit button using jQuery to prevent multiple form submits? […]