Show/Hide a Form on button click using JavaScript

avatar

Borislav Hadzhiev

Last updated: Jul 25, 2022

banner

Check out my new book

Show/Hide a Form on button click using JavaScript #

To show or hide a form on a button click:

  1. Add a click event listener to the button element.
  2. Each time the button is clicked check if the form element is hidden.
  3. If the form is hidden, show it, otherwise hide the form.

Here is the html for the examples in this article.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <form id="form"> <input type="text" /> <input type="text" /> <input type="text" /> </form> <button id="btn">Toggle form visibility</button> <script src="index.js"></script> </body> </html>

And here is the related JavaScript code.

index.js
const btn = document.getElementById('btn'); btn.addEventListener('click', () => { const form = document.getElementById('form'); if (form.style.display === 'none') { // 👇️ this SHOWS the form form.style.display = 'block'; } else { // 👇️ this HIDES the form form.style.display = 'none'; } });

show hide form on button click

The style.display property removes the form from the DOM, if you want to make the form element invisible, but still take up space on the screen, scroll down to the example which uses the style.visibility property.

We added a click event listener to the button element.

On each click, we check if the form's display property is set to none.

If the form is already hidden, we show it by setting its display property to block.

On the other hand, if the form is not hidden, we hide it by setting its display property to none.

We used the display property in the example. However, you might need to use the visibility property depending on your use case.

When an element's display property is set to none, the element is removed from the DOM and has no effect on the layout. The document is rendered as though the element does not exist.

On the other hand, when an element's visibility property is set to hidden, it still takes up space on the page, however the element is invisible (not drawn). The element still affects the layout on your page as normal.

Here is an example that uses the visibility property to make the form element invisible, but still take space on the page.

index.js
const btn = document.getElementById('btn'); btn.addEventListener('click', () => { const form = document.getElementById('form'); if (form.style.visibility === 'hidden') { form.style.visibility = 'visible'; } else { form.style.visibility = 'hidden'; } });

show hide form on click visibility hidden

If you click on the button element, you will see that the form becomes invisible, but the button doesn't take its place on the page.

Even though the form element is not rendered, it still affects the layout on the page as normal.

When we used the display property to hide the form element, the button would take its place in the DOM as the form element got completely removed from the document.

Use the search field on my Home Page to filter through my more than 3,000 articles.