In this tutorial, learn how to show/hide different HTML form on radio button selection. When the user selects the radio button, upon each selection, a new form will be open. Each time, the user will see a different form which you can use for multiple login systems.
You can also use this form for multiple registration systems. To allow different users to register for their relevant section. Each form contains the submit button to get user input on form submission. You may also like to read Show/Hide Div On Radio Button Selected Using JQuery.
Show Different Form on Radio Button Selection Using jQuery
There are three radio buttons and three forms available in the below example. On selection of the radio button, its matching login form will open. If you have multiple types of users, employees and managers login.
You can use this form for your project. It’s the easiest method which uses jQuery to show form dynamically.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<style> .myDiv{ display:none; } #showOne{ color:red; border:1px solid red; padding:10px; } #showTwo{ color:green; border:1px solid green; padding:10px; } #showThree{ color:blue; border:1px solid blue; padding:10px; } </style> |
|
1 2 3 4 5 6 7 8 9 |
<script> $(document).ready(function(){ $('input[type="radio"]').click(function(){ var demovalue = $(this).val(); $("div.myDiv").hide(); $("#show"+demovalue).show(); }); }); </script> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<input type="radio" name="demo" value="One"/> Subscriber Login <input type="radio" name="demo" value="Two"/> Employee Login <input type="radio" name="demo" value="Three"/> Manager Login <div id="showOne" class="myDiv"> <h3>Subscriber Login Form</h3> <form id="MyForm" action="" method="post"> <label>Enter Name</label> <input type="text" name="name" placeholder="Enter your name"/></br> <label>Enter Email</label> <input type="email" name="email" placeholder="Enter your email"/></br> <input type="button" class="btn btn-default" name="submit" value="Submit"/> </form> </div> <div id="showTwo" class="myDiv"> <h3>Employee Login Form</h3> <form id="MyForm" action="" method="post"> <label>Enter Name</label> <input type="text" name="name" placeholder="Enter your name"/></br> <label>Enter Email</label> <input type="email" name="email" placeholder="Enter your email"/></br> <input type="button" class="btn btn-default" name="submit" value="Submit"/> </form> </div> <div id="showThree" class="myDiv"> <h3>Manager Login Form</h3> <form id="MyForm" action="" method="post"> <label>Enter Name</label> <input type="text" name="name" placeholder="Enter your name"/></br> <label>Enter Email</label> <input type="email" name="email" placeholder="Enter your email"/></br> <input type="button" class="btn btn-default" name="submit" value="Submit"/> </form> </div> |
Output
Subscriber Login
Employee Login
Manager Login
Subscriber Login Form
Employee Login Form
Manager Login Form
Click any of the above-given radio buttons to get the relevant form. On selection of each radio button, you will get a new form to use for your users.
Each form is of a different style with the submit button. You can change the above-given forms as per your requirement.
Download Script To Display Form When User Select Radio Button
Here is the Live example which you can use to create your own show on radio button selection. You can download the script with the button given below.
The download script contains the HTML code with jQuery to perform the required task. You can change the code after download as per your requirement.
Click the above button to get the script of this post. It contains the designed form with the radio button. On click of the radio button, you will get the form matching with the radio button option. There are three radio button options in the example.
Hope, you like this post of how to show different HTML form on radio button selection. If you have any query regarding the tutorial, please comment below.
Also tell, which method you are using to create your own radio button option for forms.