How to enable and disable submit button using jQuery
In this article, we will explain to you how to enable and disable submit button using jquery. here we will give you a simple example of how to enable submit button using jquery and how to disable submit button using jquery.
Step 1: Using prop() method
In this step, we will use the jquery prop() method, in the following example we can easily enable or disable submit button in jquery. so you can see the following example.
1 2 3 4 5 | //enable button $(this).prop('disabled',true); //disable button $(this).prop('disabled',false); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <!DOCTYPE html> <html lang="en"> <head> <title>How to enable & disable submit button using jQuery - XpertPhp</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <script> $(document).ready(function() { $('.btnLogin').click(function() { $(this).prop('disabled',true); setTimeout(function(){ $('.btnLogin').prop('disabled', false); },3000); }); }); </script> </head> <body> <div class="container"> <h2>Login</h2> <form action="/action_page.php"> <div class="form-group"> <label for="email">Email:</label> <input type="email" class="form-control" id="email" placeholder="Enter email" name="email"> </div> <div class="form-group"> <label for="pwd">Password:</label> <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd"> </div> <button type="submit" class="btn btn-success btnLogin">Login</button> </form> </div> </body> </html> |
Step 2: Using attr() method
In this step, we will use the jquery attr() method, in the following example we can easily enable or disable submit button in jquery. so you can see the following example.
1 2 3 4 5 | //enable button $(this).attr('disabled',true); //disable button $(this).attr('disabled',false); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <!DOCTYPE html> <html lang="en"> <head> <title>How to enable & disable submit button using jQuery - XpertPhp</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <script> $(document).ready(function() { $('.btnLogin').click(function() { $(this).attr('disabled',true); setTimeout(function(){ $('.btnLogin').attr('disabled', false); },3000); }); }); </script> </head> <body> <div class="container"> <h2>Login</h2> <form action="/action_page.php"> <div class="form-group"> <label for="email">Email:</label> <input type="email" class="form-control" id="email" placeholder="Enter email" name="email"> </div> <div class="form-group"> <label for="pwd">Password:</label> <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd"> </div> <button type="submit" class="btn btn-success btnLogin">Login</button> </form> </div> </body> </html> |
We think would you like this article, so you can click on the “Show Demo” button and you can see this demo article.
Please follow and like us:
