How To Show/Hide A Form On Button Click Using JavaScript?

Posted on by Cora Lopez
Show/Hide a Form on button click using JavaScript

Show/Hide a form on button click is a cool effect for web pages. So, in this article, we will show you how to show/hide a form on button click using JavaScript. Read on it now.

How to show/hide a form on button click using JavaScript?

Here are some simple ways that we would recommend to you.

Using display property

The display property allows you to specify the appearance of elements differently from their default settings.

The block value of the display property turns an element into a block element. The block element takes up 100% of the parent width, and we can see the block elements.

The none value of the display property hides the element and all its children from the page. We cannot see and manipulate the element whose display is none.

First, we hide our form with display: none, then call onclick on the button element and assign it a function to change the form’s display property. If the form’s display is none, we change it to block and vice versa.

<body>
  <main id="app">
    <button class="btn">Show learnshareit form</button>
    <form style="display: none">
      <div class="form-control">
        <label>Username</label>
        <input type="text" placeholder="Your username" />
      </div>
      <div class="form-control">
        <label>Password</label>
        <input type="password" placeholder="Your password" />
      </div>
    </form>
  </main>
  <script src="script.js"></script>
</body>
// Get the form and the button elements
const form = document.querySelector("form");
const btn = document.querySelector(".btn");

// Change the form's display property by clicking the button
btn.onclick = function () {
  if (form.style.display === "none") {
    // Change the display of the form to block
    form.style.display = "block";

    // Change the text of the button
    btn.innerText = "Hide learnshareit form";
  } else {
    // Change the display of the form to none
    form.style.display = "none";

    // Change the text of the button
    btn.innerText = "Show learnshareit form";
  }
};

Output:

Using visibility property

We can use the visibility property to replace the display property. Compared to the display property, the advantage of the visibility property is that it does not change the surrounding elements, so the form’s visibility will not change our button position. Observe the example below and its output for better understanding.

First, we add the style to the form tag as follows:

<form style="visibility: hidden">

Then use JS to hide/show the form with the visibility property as follows:

// Get the form and the button elements
const form = document.querySelector("form");
const btn = document.querySelector(".btn");

// Change the form's visibility by clicking the button
btn.onclick = function () {
  if (form.style.visibility === "hidden") {
    // Change the visibility of the form to visible
    form.style.visibility = "visible";

    // Change the text of the button
    btn.innerText = "Hide learnshareit form";
  } else {
    // Change the visibility of the form to hidden
    form.style.visibility = "hidden";

    // Change the text of the button
    btn.innerText = "Show learnshareit form";
  }
};

Output:

As you can see, our button no longer moves up and down like the output of the first method.

Using opacity property

Like the visibility property, the opacity does not change the surrounding elements. But we can still manipulate the hidden element with the opacity property because it’s just invisible.

In the HTML file, we hide the form tag with the opacity as follows:

<form style="opacity: 0">

In the js file, we switch back and forth between the 0 and 1 values ​​of the opacity property to hide/show an element. Like this:

// Get the form and the button elements
const form = document.querySelector("form");
const btn = document.querySelector(".btn");

// Change the form's opacity by clicking the button
btn.onclick = function () {
  if (form.style.opacity === "0") {
    // Change the opacity of the form to 1
    form.style.opacity = "1";

    // Change the text of the button
    btn.innerText = "Hide learnshareit form";
  } else {
    // Change the opacity of the form to 0
    form.style.opacity = "0";

    // Change the text of the button
    btn.innerText = "Show learnshareit form";
  }
};

Output:

When hovering over two inputs, our cursor is changed, proving that the form tag is invisible and we can still manipulate it.

Summary

There are three ways to hide an element: display property, visibility property, and opacity property. Through this article, you not only know how to show/hide a form on button click using JavaScript but also know the difference between the three properties above so that you can choose the most suitable one for you.

Thank you for reading!

Maybe you are interested:

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *