✖

All TalkersCode Topics

Follow TalkersCode On Social Media

Enable Disable Submit Button Using jQuery

Last Updated : Apr 15, 2022

IN - 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.

Enable Disable Submit Button Using jQuery

CHECK OUT THIS TUTORIAL LIVE DEMO →

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.

CHECK OUT THIS TUTORIAL LIVE DEMO →

Latest Tutorials