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.
CHECK OUT THIS TUTORIAL LIVE DEMO →
To Enable Disable Submit Button It Takes Only Two Steps:-
- Make a HTML file and define markup and scripting
- 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.
I hope this tutorial on disable submit button jquery and enable submit button jquery helps you and the steps and method mentioned above are easy to follow and implement.
Latest Tutorials
- Create Animated Skill Bar Using jQuery, HTML And CSS
- Simple And Best Responsive Web Design Using CSS Part 2
- Show Button On Hover Using HTML And CSS
- Material Design Login Form Using jQuery And CSS
- Animated Progress Bar Using jQuery And CSS
- Dynamic Drop Down Menu Using jQuery, Ajax, PHP And MySQL
- Get Website Statistics Using PHP, jQuery And MySQL
- HTML5 Login And Signup Form With Animation Using jQuery
- Facebook Style Homepage Design Using HTML And CSS
- View Webpage In Fullscreen Using jQuery