Want To Be A Blogger  →  Start A Blog  →  Increase Traffic  →  Make Money Online  →  Recommended Things

Enable Disable Submit Button Using jQuery

Thursday, Sep 28, 2017

Tags:- jQuery HTML


In this tutorial we will show you how to enable and disable submit button using jQuery.We disabled the button in start and user have to fill all the fields to enable the submit button.This method is used to avoid submission of blank fields in form now user have to fill all the fields to submit the form otherwise the form will not be submitted.You may also like Disable click cut copy and paste using jQuery.


See Demo
Enable And Disable Submit Button Using jQuery


To Enable Disable Submit Button It Takes Only Two Steps:-

  1. Make a HTML file and define markup and scripting
  2. Make a CSS file and define styling


Step 1.Make a HTML file and define markup and scripting

We make a HTML file and save it with a name form.html

<html>
<head>
<link href="form_style.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $(".text_field").bind("keyup", check_field);
});

function check_field()
{
 var name=$("#sender_name").val();
 var email=$("#sender_email").val();
 var reason=$("#reason").val();
 var message=$("#message").val();
 if(name!="" && email!="" && reason!="" && message!="")
 {
  $("#submit_form").prop( "disabled", false);
  return true;
 }
 else
 {
  $("#submit_form").prop( "disabled", true);
  return false;
 }
}
</script>
</head>
<body>
<div id="wrapper">

<div id="contact_form">
<form method="post" onsubmit="return check_field();">
<table align=center>
 <tr>
  <td>Enter Your Name : </td><td><input type="text" id="sender_name" class="text_field"></td>
 </tr>
 <tr>
  <td>Enter Your Email : </td><td><input type="text" id="sender_email" class="text_field"></td>
 </tr>
 <tr>
  <td>Contact Reason : </td><td><input type="text" id="reason" class="text_field"></td>
 </tr>
 <tr>
  <td>Message : </td><td><textarea id="message" class="text_field"></textarea></td>
 </tr>
</table>
<p><input type="submit" id="submit_form" name="send_mail" value="SUBMIT FORM"></p>
</form>
</div>

</div>
</body>
</html>

In this step we create a form to submit details and add some text fields and submit button. We disable the submit button in starting and enable the submit button only when user fills all the details.We add keyup event in all text fields and text area to call check_field() function.In check_field() function we get values of textbox and textarea and check if all the values are filled then enable the submit button and if all the values are not filled then remain the submit button disabled.You may also like disable text selection using css.



Step 2.Make a CSS file and define styling

We make a CSS file and save it with a name form_style.css

body
{
 text-align:center;
 width:100%;
 margin:0 auto;
 padding:0px;
 font-family:helvetica;
 background-color:#F7D358;
}
#wrapper
{
 text-align:center;
 margin:0 auto;
 padding:0px;
 width:995px;
}
#contact_form
{
 background-color:white;
 width:450px;
 padding:20px;
 box-sizing:border-box;
 margin-left:270px;
 box-shadow:0px 0px 10px 0px #886A08;
}
#contact_form td
{
 margin:10px;
 color:#886A08;
 font-weight:bold;
}
#contact_form input[type="text"]
{
 width:250px;
 height:35px;
 padding-left:5px;
}
#contact_form textarea
{
 width:250px;
 height:70px;
 padding-left:5px;
}
#contact_form input[type="submit"]
{
 background-color:#B18904;
 color:white;
 border:none;
 border-bottom:5px solid #886A08;
 width:150px;
 height:45px;
 border-radius:2px;
}

Thats all, this is how to enable and disable submit button using jquery.You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.

Subscribe Our Newsletter And Get Tutorials And Offers Via Email

About Me


Hello, My Name is Mudit Jain. I am a Web Developer, Professional Blogger and Digital Marketer from India. I am the founder of TalkersCode. I started this blog in february 2015 to help web developers & bloggers by providing easy and best tutorials, articles and offers for web developers and bloggers.