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,

  1. Disable submit button on page load – $(‘:input[type=”submit”]’).prop(‘disabled’, true); this will make the property disabled to true
  2. Check the text box keyup event to know if user is typing or not
  3. 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

Related Posts

JQuery Remove duplicate elements

JQuery Remove duplicate elements – Easy method

JQuery Remove duplicate elements: It’s very easy to remove duplicate elements from a list using jQuery. Demo: Let’s say we have below list: Here multiple duplicate values…

jQuery sorting by price

jQuery sorting by price – Easy method(jQuery 3.x)

In this example let’s check how to do jQuery sorting by price in an easy way. Demo: Its a very important feature in ecommerce platforms to do…

sum of datatable column

Calculate sum of Datatable columns and display in footer – Easy method with sum()

In this example let’s check how to calculate sum of datatable columns (multiple columns) and display the same in footer. In some cases we may need to…

jquery datatable

jQuery Datatable – Easy Steps

Here is simple example to create jQuery Datatable. jQuery Datatable organizes data in grid like format of rows and columns. It is very organized, interactive and intutive….

css counter

Automatic serial number in HTML table – CSS Counter

Here we will discuss how to get serial number automatically in a column in the html table. CSS counters are “variables” maintained by CSS whose values can…

jquery toggle

jQuery Toggle() Method

How to do jquery Toggle() method to show/hide onclick The jQuery toggle() method is used to toggle between the hide() and show() method. It shows the hidden…

Leave a Reply

Your email address will not be published. Required fields are marked *