Issue in hide and show form using html and js

JavaScript
1

I have one form which is having id ’ add_form’ and by default the form is hidden and I want to show this form on clicking a button named ‘open form’ In addition to this I have a side menu named 'show details ’ , when I click on this side menu then form should get hide

NOTE : The add_form button is global i.e it is present on every page of my website

How should I do it ?

2

Like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
     #add_form {
      display: none;
     }
    </style>
  </head>
  <body>

    <form id="add_form">
      <label for="name">Name:</label>
      <input id="name" placeholder="Enter Name" />
    </form>

    <button id="open_form">Open Form</button>
    <button id="hide_form" disabled>Hide Form</button>

    <script>
      const showForm = document.getElementById('open_form');
      const hideForm = document.getElementById('hide_form');
      const form = document.getElementById('add_form');

      showForm.addEventListener('click', () => {
        form.style.display = 'block';
        showForm.disabled = true;
        hideForm.disabled = false;
      });

      hideForm.addEventListener('click', () => {
        form.style.display = 'none';
        showForm.disabled = false;
        hideForm.disabled = true;
      });
    </script>
  </body>
</html>
1 Like
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.