Show/Hide a Form on button click using JavaScript

avatar

Borislav Hadzhiev

Tue Dec 28 20212 min read

banner

Photo by Pablo Hermoso

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'; } });
The style.display property removes the form from the DOM, if you want to make the form element invisible, but still take 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 examples, 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). It 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'; } });
If you click on the button element, you will see that the form is hidden, however 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.

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee