Hariom
Prajapati
17 Jul 2022
JQueryIn this tutorual we will see how to disable submit button to prevent duplicate form submission on click using jQuery.
Some time we working with PHP , Laravel , codeigniter or any other frame work and we need to submit any large and big form then due to large form it should take some time to submit form , so user think that button not working or any thing and they click submit buttons multiple time due to which duplicate form is submitted.
So this article help you to disable submit button on click until form will submit to prevent duplicate form submission .
Syntax
$('#takenFormId').submit(function(){
$("#takenButtonID", this)
.html("Please Wait.....")
.attr('disabled', 'disabled');
return true;
});Disable submit button to prevent duplicate form submission on click using jQuery
<!DOCTYPE html>
<html>
<head>
<title>Disable submit button to prevent duplicate form submission on click using jQuery</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="Full Name">
<input type="text" name="email" placeholder="Email Address.">
<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>