In form submission, we don’t want user to click multiple times on the submit button. You may want to disable the submit button when the form is being submitted to the server because resubmit the same content to the server again and again, may cause script failure.
To overcome this problem we can simply disable the submit button so the user can not click the button again until it gets released when we get a response from the server.
In this post we will show you how you can disable the submit button after form submission.
First add the jQuery library so that our function can work.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>Use jQuery prop() to disable a button.
//where #submit is id of your form submit button
$("#submit").prop( "disabled", true);
- Use true – when you want to disable the button
- Use false – when you want to enable the button
If user clicks on submit button, we can disable it like this :
$("#submit").click(function () {
$(this).prop( "disabled", true);
//$(this).prop( "disabled", false); //to enable button just set 2nd parameter false
});
Here is the full example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>How to enable and disable the submit button using jQuery?</title>
</head>
<body>
<button id="submit">Submit</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$("#submit").click(function () {
$(this).prop( "disabled", true);
});
</script>
</body>
</html>
Hope it will help.
You can also check Simple jQuery form validation.
