Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to enable and disable submit button using jQuery?
To enable and disable submit button, use the jQuery prop() method. The prop() method gets or sets properties and values of the selected elements. When used with the disabled property, it can control whether a button is clickable or not.
Syntax
Here's the basic syntax for enabling and disabling buttons −
// To disable a button
$(selector).prop('disabled', true);
// To enable a button
$(selector).prop('disabled', false);
Example
You can try to run the following code to enable and disable submit button using jQuery −
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#register').click(function() {
// Disable the button immediately
$(this).prop('disabled', true);
$("#content").show();
// Re-enable the button after 3 seconds
setTimeout(function(){
$('#register').prop('disabled', false);
$("#content").hide();
}, 3000);
});
});
</script>
</head>
<body>
<div id="btnregister" name="registerbtn">
<input type="submit" value="Click me!" id="register" name="register"/>
</div>
<div style="display:none;" id="content">
The above button disables for 3 seconds, on clicking.
</div>
</body>
</html>
How It Works
In the above example −
- When the submit button is clicked,
$(this).prop('disabled', true)immediately disables it - The message div becomes visible using
$("#content").show() - After 3000 milliseconds (3 seconds), the button is re-enabled with
prop('disabled', false) - This prevents multiple form submissions and provides user feedback
This technique is commonly used to prevent double-clicking on forms and ensure better user experience during form processing.
Advertisements
