Last Updated on June 5, 2021 by Roshan Parihar
To show/hide form on button click in jQuery, you can either use show() and hide() function or use the jQuery toggle() function. It toggles the form and display or hide when the user clicks on the button.
You can use this to save some space on your web page. It also requires to first hide the form and show it only when the user clicks on the button.
Display and Toggle Form Using jQuery toggle() Function
To create a show/hide form on button click, you need to use toggle(). JQuery toggle() is the easiest function to create any toggle effect and display or hide the content on click.
Below is the simple example to show hide form on button click. It contains a simple form that requires the user to fill out the name and email and click the submit button. You can use the PHP script to insert or update the details of the user on the click of the submit button. Show this form only when the user clicks on the given button.
|
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 |
<style> #MyForm{ display: none; width: 300px; border: 1px solid #ccc; padding: 14px; background: #ececec; } </style> <script> $(document).ready(function(){ $('#Mybtn').click(function(){ $('#MyForm').toggle(500); }); }); </script> <p>Click the below button to fill your profile details.</p> <button id="Mybtn" class="btn btn-primary">Edit Your Details</button> <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> |
Output
Click the below button to fill your profile details.
Click the above-given button to display the form or toggle form. The click event displays an overall form with form elements, create your own PHP script as per your requirement and use this form.
Show/Hide Form On Button Click Using jQuery show() and hide()
You can use the show() and hide() to show/hide form on button click. See the example below contains two buttons and a form element. When you click the show button, it displays the form to the user to fill details. However, when the user clicks the hides button, it hide the form after the specified duration of 500ms.
|
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 |
<style> #showhideForm{ display: none; width: 300px; border: 1px solid #ccc; padding: 14px; background: #ececec; } </style> <script> $(document).ready(function(){ $('.showbtn').click(function(){ $('#showhideForm').show(500); }); $('.hidebtn').click(function(){ $('#showhideForm').hide(500); }); }); </script> <p>Click the below button to fill your profile details.</p> <button class="showbtn btn btn-primary">Show Form</button> <button class="hidebtn btn btn-primary">Hide Form</button> <form id="showhideForm" 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> |
Output
Click the below button to fill your profile details.
Click the show button to get the form and hide button to hide the form.
DOWNLOAD Free jQuery CHEAT SHEET
You may also like to read.