jQuery disable/enable submit button

How to disable/enable submit button using jQuery?

When we want to submit the form after filling all the mandatory data, then the easiest method is to disable the submit button. For disable/enable submit button we are using jQuery.

HTML :

<!DOCTYPE html>
<html>
    <head>
    <title>Disable/Enable submit Button</title>
	<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
	 <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
	 <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    </head>
    <body style="margin-top: 10%">
	<div class="container">
            <div class="row">
               <div class="col-md-offset-5 col-md-3">
                   <div class="form-login">
                      <h4>Type it..!</h4>
                         <input type="text" name="textField" class="form-control input-sm chat-input" placeholder="Type here..." />
                         </br>
                         <div class="wrapper">
                         <span class="group-btn"> 
            	            <input type="submit" value="Go" class="btn btn-primary btn-md"/>    
                         </span>
                      </div>
                   </div>
               </div>
            </div>
        </div>
    </body>
</html

Define your necessary form fields and a submit button.

Here I have given Bootstrap js, css and jquery.js files. Some extra styles given as follows,

<style type="text/css">
body {
  background-color:#fff;
  -webkit-font-smoothing: antialiased;
  font: normal 14px Roboto,arial,sans-serif;
}

.container {
    padding: 25px;
    position: fixed;
}

.form-login {
    background-color: #EDEDED;
    padding-top: 10px;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 15px;
    border-color:#d2d2d2;
    border-width: 5px;
    box-shadow:0 1px 0 #cfcfcf;
}

h4 { 
 border:0 solid #fff; 
 border-bottom-width:1px;
 padding-bottom:10px;
 text-align: center;
}

.form-control {
    border-radius: 10px;
}

.wrapper {
    text-align: center;
}
</style>

Paste this styles before closing the head tag to get the design also.

jQuery : https://code.jquery.com/jquery-1.11.1.min.js

Bootstrap Css : https://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css

Bootstrap js : https://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js

jQuery :

<script type="text/javascript">
   $(document).ready(function() {
      $(':input[type="submit"]').prop('disabled', true);
      $('input[type="text"]').keyup(function() {
          if($(this).val() != '') {
              $(':input[type="submit"]').prop('disabled', false);
        }
        else
        {
              $(':input[type="submit"]').prop('disabled', true);
        }
     });
 });
</script>

Here,

Disable submit button on page load – $(‘:input[type=”submit”]’).prop(‘disabled’, true); this will make the property disabled to true
Check the text box keyup event to know if user is typing or not
If value of text box is not equal to null (!=”) then enable button by setting property disabled to false, else disable button by setting property disabled to true.

For other jQuery solutions please visit jQuery

Post Views: 706