How to disable submit button after clicking using jQuery
In this tutorial, we will learn How to disable submit button after clicking using jQuery. mainly we use when users press a few times on the submit button to make sure the button is surely clicked, and causing the double form submission issue. and the solution is to disable the submit button after the user clicked on submit button. we will learn disabled submit button after clicking using jQuery.
We use to disable a submit button, you just disabled the attribute to the submit button. we set the disabled attribute to true button disable and disabled attribute to false remove the disabled attribute.
Also read: How to bind a jquery trigger to click on ajax loaded content
Enable / Disable submit button
Example 1
#Disable
$("#submitBtn").attr("disabled", true);
#Enable
$('#submitBtn').attr("disabled", false);
== OR ==
$('#submitBtn').removeAttr("disabled");
Example 2
$('input[type=submit]').click(function() {
$(this).attr('disabled', 'disabled');
$(this).parents('form').submit();
});Example 3
$('form').submit(function() {
$(this).find("button[type='submit']").prop('disabled',true);
});jQuery full example
<!DOCTYPE html>
<html lang="en">
<body>
<h1>How to disabled submit button after clicked using jQuery</h1>
<form id="submitForm" action="proccess.php" method="POST">
<input type="submit" id="submitBtn" value="Submit"></input>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<input type="button" value="i am normal user" id="btnUser"></input>
<script>
$(document).ready(function () {
$("#submitForm").submit(function (e) {
//stop submitting the form to see the disabled button effect
e.preventDefault();
//disable the submit button
$("#submitBtn").attr("disabled", true);
//disable a normal button
$("#btnUser").attr("disabled", true);
return true;
});
});
</script>
</body>
</html>
