Last Updated on August 5, 2022 by Roshan Parihar
In this tutorial, learn how to show and hide different HTML form on radio button selection. The short answer is to use the val() function along with show() and hide() function.
When the user selects the radio button, upon each selection, a new form will open. Each time, the user will see a different form that you can use for multiple login systems. You can also use this for multiple registration systems.
Show Different HTML Form On Radio Button Selection
There are three radio buttons and three forms available in the below example. When you choose the option, its matching login form will open.
You have to first add forms in different <div> elements with different ids. After that, use the val() function to get the id of <div> elements to display different forms. The show() and hide() function show and hide forms when required.
|
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 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
<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> <script> $(document).ready(function(){ $('input[type="radio"]').click(function(){ var demovalue = $(this).val(); $("div.myDiv").hide(); $("#show"+demovalue).show(); }); }); </script> <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"> <strong>Subscriber Login Form</strong> <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"> <strong>Employee Login Form</strong> <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"> <strong>Manager Login Form</strong> <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
Click any of the above-given radio buttons to get the relevant form. When you choose a button, you will get a new form to use for your users.
If you have multiple types of users, employees, and managers log in, you can use this form for your project. It’s the easiest method that uses jQuery to show form dynamically.
Each form is of a different style with the submit button. You can change the above-given forms as per your requirement.
You may also like to read
- Get Selected Radio Button Value Using JQuery
- Show/Hide Div On Dropdown Selected Using JQuery
- Change Image On Dropdown Select Option Using JQuery
I hope you like this post on how to show different HTML forms on radio button selection.
References