Disable button on form submit using Jquery



If you have ever worked with a website that has quite substantial number of users, you would have come across the problem of duplicate submission. Some of them may be pressing the form submit buttons multiple times leading to duplicate entries. In order to solve this problem, one of the tricks is to disable submit button once the submission is made. And how you do that using Jquery? Here is the example:

Following is the form you need to enable "disable submit" functionality to:

<form name="form1">
<input type="text" name="txtbox" value="Enter something" />
<input type="Submit" id="submitbtn" name="Submit" />
</form>

Jquery function(s) that needs to be declared on the header of the page:

Jquery Disable Submit Button Example 1

// find the button with id and disable it.
$('form').submit(function(){
    $('#submitbtn').attr('disabled', 'disabled');
});

In the above code, we attach the disabled attribute using attr() function to the button with css id submitbtn. Simple?

Jquery Disable Submit Button Example 2

// find all the submit buttons and disable them on click
$('form').submit(function(){
    $('input[type=submit]', this).attr('disabled', 'disabled');
});

In the above code, we attach the disabled attribute using attr() function to all the input types submit. Therefore, all the input forms on the page would now have attribute disabled on form submit.

Therefore, complete code would look like:

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js">
$('form').submit(function(){
    $('input[type=submit]', this).attr('disabled', 'disabled');
});
</script>
</head>
<body>
<div id="container">
<form name="form1">
<input type="text" name="txtbox" value="Enter something" />
<input type="Submit" id="submitbtn" name="Submit" />
</form>
</div>
</body>
</html>