How to Show/Hide Form On Button Click Using jQuery

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.

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.

Note: If you want to use the single button to show/hide the form, jQuery toggle() function is the best option to use.
Bonus: download a Free jQuery cheat sheet that will show you 20+ most important examples to learn in jQuery.

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.

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.