Show/Hide elements JavaScript

I am attempting to create forms that are hidden on each page. I figure I had to make a separate functions for each button and form that I wanted to hide. So my logic was to use the same code on separate JS pages but changing the id and function names on each JS page.

However when I do so, using the exact same code the button works on one page and not on the other page.

This is a start of many layers I’m trying to learn, such as opening form on same page and transition it to appear using jQuery.

The 1st code was this, it works but I would like to append and add to it

<!DOCTYPE html>
<html lang="EN">
<meta charset="UTF-8">

<head>
  <title>button test</title>
  <script>
    window.onload = function() {
      document.getElementById("tkform").style.display = "none";
    }
    window.onload = function() {
      document.getElementById("cleanForm").style.display = "none";
    }

    function openForm() {
      document.getElementById("cleanForm").style.display = "block";

    }

    function closeForm() {
      document.getElementById("cleanForm").style.display = "none";
    }



    function optkForm() {
      document.getElementById("tkForm").style.display = "block";



    }

    function clstkForm() {
      document.getElementById("tkForm").style.display = "none";
    }
  </script>
</head>

<body>
  <h3>
    I am attempting to create forms that are hidden on each page. I figure I had to make a separate functions for each button and form that I wanted to hide. So my logic was to use the same code on separate JS pages but changing the id and function names
    on each JS page. However when I do so, using the exact same code the button works on one page and not on the other page. This is a start of many layers I'm trying to learn, such as opening form on same page and transition it to appear using jquery.
    1. The 1st code was this, it works but I would like to append and add to it
  </h3>
  <p>
    HTML
  </p>
  <button onclick="openForm()" style="font-size: 16px; text-align: center" ;>
            Get an Estimate</button>
  <button onclick="closeForm()">Close Form</button>
  <form class="cleanform" id="cleanForm" action="/action_page.php">
    <legend>Book a Visit</legend>

    <p>Please fill out your information below.</p>
    <br>

    <p id="text" style="display:none">Checkbox is CHECKED!</p>

    <div class="columns">
      <div class="item">
        <label for="fname">First Name<span>*</span></label>
        <input id="fname" type="text" name="fname" />
      </div>
      <div class="item">
        <label for="lname"> Last Name<span>*</span></label>
        <input id="lname" type="text" name="lname" />
      </div>
      <div class="item">
        <label for="eaddress">Email Address<span>*</span></label>
        <input id="eaddress" type="text" name="eaddress" />
      </div>
      <div class="item">
        <label for="zipcode">Zip Code<span>*</span></label>
        <input id="zipcode" type="text" name="zipcode" pattern="[0-9] {5}" title="5 digit Zip" />
      </div>
    </div>
    <fieldset>
      <legend style="background-color: rgb(221, 210, 210)">
        <p>Service Frequency</p>
      </legend>
      <div class="columns">
        <p>Is This a One-Time or Recurring Clean?</p>

        <div class="item">
          <br>
          <label for="myCheck">One-Time Cleaning</label>
          <input type="checkbox" id="myCheck" onclick="myFunction()">
          <label for="myCheck">Recurring Service</label>
          <input type="checkbox" id="myCheck" onclick="myFunction()">
        </div>
      </div>
      <div class="columns">
        <p>Do You need a Move In/Move Out clean?</p>

        <div class="item">
          <br>
          <label for="myCheck">Yes</label>
          <input type="checkbox" id="myCheck" onclick="myFunction()">
          <label for="myCheck">No</label>
          <input type="checkbox" id="myCheck" onclick="myFunction()">

        </div>
      </div>
    </fieldset>
    <div class="columns">
      <div class="item">
        <label for="bedrooms">Bedrooms:<span>*</span></label>
        <input type="number" id="bedrooms" name="bedrooms" min="0" ; max="8" ; name="bedroom" placeholder="0" />
      </div>
      <div class="item">
        <label for="bathroom">Bathrooms:<span>*</span></label>
        <input type="number" id="bathrooms" name="bathrooms" min="0" ; max="20" placeholder="0" />
      </div>
      <div class="item">
        <label for="sqrfoot">Square Foot:<span>*</span></label>
        <input type="text" id="sqrfoot" name="sqrfoot" placeholder="Total Square Foot">
      </div>
    </div>
    <input type="submit" name="Book Now">
  </form>
  <p style="background-color: yellow;">
    2. This is code that I copied and reformatted for use on a separate page, yet it does not work. What am I missing here?
  </p>
  <p>
    HTML
  </p>
  <button onclick="optkForm()">
    Open Form</button>

  <button onclick="clstkForm()">Close Form</button>

  <form class="tkform" id="tkform" method="post" action="URL_to_script">
    <fieldset>
      <legend>Turn Key Service</legend>
      <p>
        <label class="question" for="the_name">Name:</label>
        <input type="text" id="the_name" name="the_name" placeholder="Enter Your Full Name" size="24" />
      </p>
      <p>
        <label class="question" for="the_email">Email:</label>
        <input type="text" id="the_email" name="the_email" placeholder="Email" size="32" required/>
      </p>
      <p>
        <label class="question" for="the_addy">Address:</label>
        <input type="text" id="the_addy" name="the_addy" placeholder="Street Address" size="32" required/>
      </p>
      <p>
        <label class="question" for="the_zip">Zip:</label>
        <input type="text" id="the_zip" name="the_zip" placeholder="ZipCode" size="12" required pattern="[0-9] {5}" />
      </p>
      <p>
        <label class="question" for="the_name">Bedrooms:</label>
        <input type="number" id="bedrooms" name="bedrooms" min="0" max="8" size="2" required/>
      </p>
      <p>
        <label class="question" for="the_name">Bathrooms:</label>
        <input type="number" id="bathrooms" name="bathrooms" min="1" max="20" size="2" required/>
      </p>
      <p>

        <label class="question" for="sqft">Squarefoot:</label>
        <input type="text" id="sqft" name="squarefoot" placeholder="Sqrft" size="12" required/>
      </p>
      <p>

        <label class="question" for="the_message">Message:</label>
        <textarea id="the_message" name="the_message" placeholder="Enter Your Message Here" rows="7" cols="55" vertical-align="top">
      </textarea>
      </p>
    </fieldset>

    <button input type="submit">Submit</button>
    </div>
    </div>

  </form>
</body>

</html>

Answer

The description looks mixed in. However if you are looking for why the button is not working for the “tkform”, then you need to change the id of the “tkform” either in the call to action functions:

function optkForm() {
      document.getElementById("tkForm").style.display = "block";



    }

function clstkForm() {
      document.getElementById("tkForm").style.display = "none";
    }

in the form HTML description

<form class="tkform" id="tkform" method="post" action="URL_to_script">
</form>

“tkform” & “tkForm” are two different IDs.

Advertisement

Answer