We will learn how to disable a button on click in jquery in this short post to stop multiple form submissions. Using jquery, we can prevent the submission of duplicate forms. In jquery, we can quickly block a button’s on-click event to prevent double-form submission.
When working with PHP or another framework, such as Laravel , CodeIgniter, you might use a form with just one submit button. We have a big, complicated form that might take some time to submit, so users can click repeatedly without the form really submitting.
Therefore, we must stop numerous form submissions, just as we must stop double-clicking the submit button. so how we can prevent this? we can do it using jquery. when you click on submit button.
$(document).ready(function() {
$('form').submit(function() {
// Disable the submit button
$(this).find(':submit').prop('disabled', 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 - Cotocus.com</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<form id="myForm">
<input type="text" name="name" placeholder="Name...">
<input type="text" name="email" placeholder="Email...">
<button type="submit" id="myButton">Submit</button>
</form>
<script type="text/javascript">
$('#myForm').submit(function(){
$("#myButton", this)
.html("Please Wait...")
.attr('disabled', 'disabled');
return true;
});
</script>
</body>
</html>I hope it can help you!!!