How to only access one form at a time on a webpage using javascript

December 30, 2021

Hi I’m trying to make an online reference generator where when a user clicks one of the three buttons in my html a popup form will appear. The problem I’m having is that i want to restrict it to one form at a time, so if a user clicks another button an alert will appear telling them to close the existing form.

This is my html displaying the three buttons.

<div class="front-page">
    <div class="grid-container">
        <h1>What would you like to reference?</h1>
        <button type="button1" class="button1" onclick="openForm()">
            <span class="button__text">Book</span>
            <span class="button__icon"></span>
            <i class="fas fa-book"></i>
        </button>

        <button type="button1" class="button1" onclick="openFormW()">
            <span class="button__text">Website</span>
            <span class="button__icon"></span>
            <i class="fas fa-laptop"></i>

        </button>
        <button type="button1" class="button1" onclick="openFormA()">
            <span class="button__text">Article</span>
            <span class="button__icon"></span>
            <i class="far fa-file-alt"></i>
        </button>
    </div>
</div>

This is my javascript code which I’m trying to invoke an if statement into each function.

    function openForm() {

  if(openFormA || openFormW != null) {
    alert("unable to open two forms at once, Please close existing form")
  } else {
  document.getElementById("bookForm").style.display = "block";
  }
}

function closeForm() {
  document.getElementById("bookForm").style.display = "none";
}
  function openFormW() {
    document.getElementById("websiteForm").style.display = "block";
  }
  function closeFormW() {
    document.getElementById("websiteForm").style.display = "none";
  }
  function openFormA() {
    document.getElementById("articleForm").style.display = "block";
  }
  function closeFormA() {
    document.getElementById("articleForm").style.display = "none";
  }

Blockquote

>Solution :

if(openFormA || openFormW != null)

This says if openFormA is defined is some way ( it seems it will always be) or openFormW is not null then show the error. I dont think that is what you intended here.

I think what you want to do is follow a similar approach as this
Javascript radio button deselect others when selecting one radio button?

Also side note. You might want to not call these things ‘Forms’ as Forms in HTML are something else entirely 🙂