1

JavaScript Noob

On the footer of the site I'm trying to display the contact info with a popup like form whenever I copied the code to new page or new device the button clicked opens the form but then the form closes immediately Is there a way to fix this?

<button class="open-button" onclick="openForm()">
            Contact Us</button>
            <div class="form-popup">
              <form class="form-container" id="myForm">
              <h1>info@indiepump.com</h1>
              <button type="button" class="btn-cancel" onclick="closeForm()">&times;</button>
              </form>
            </div>

            <script>
              function openForm() {
                //openForm().stopPropagation();
                document.getElementById("myForm").style.display = "flex";
              }
              function closeForm() {
                document.getElementById("myForm").style.display = "none";
              }
            </script>

And the CSS part:

.open-button {
  background-image: url(/usr/fsociety/indiepump_test/test_4/social_icons/email.png);
  background-repeat: no-repeat;
  background-color: transparent;
  padding: 17px 21px;
  border: none;
  cursor: pointer;
  position: fixed;
  justify-content: space-between;
  align-items: center;
  vertical-align: middle;
  text-align: right;
  text-decoration: none;
  font-size: 0.9rem;
  margin-left: 1rem;
  height: 27px;
  width: 121px;
  padding: 3px 3px;
  padding-left: 3px;
  color: red;
}

.form-popup {
  display: none;
  position: fixed;
  align-items: center;
  justify-content: space-between;
  vertical-align: middle;
  bottom: 2.5rem;
  left: 2rem;
  border: 1px solid red;
  border-radius: 10px;
  color: red;
  font-size: 0.7rem;
  z-index: 10000;
}

.form-container {
  display: flex;
  max-width: 300px;
  width: 300px;
  height: 50px;
  align-items: center;
  justify-content: space-between;
  vertical-align: middle;
  text-align: center;
  padding: 10px;
  background-color: #f9e3d5;
  z-index: 100000;
}

.btn-cancel {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  vertical-align: middle;
  text-align: center;
  width: 25px;
  height: 25px;
  border: none;
  background-color: transparent;
  color: red;
  font-size: 1.9rem;
  cursor: pointer;
}

I've already tried Google search solutions to no avail.

Also different methods from other helpful sites but every time I change something the button doesn't work at all.

Alireza Ahmadi
  • 8,579
  • 5
  • 15
  • 42
Andrew Mokas
  • 23
  • 5

2 Answers2

2

After click on button the element with .form-popup class does not show because in your CSS you have set display:none:

.form-popup {
    display: none;
    ....
}

So you need to set display:flex or block for .form-popup too.

Here is working sample:

function openForm() {
     document.getElementById("myForm").parentElement.style.display = "flex";
     document.getElementById("myForm").style.display = "flex";

 }
 function closeForm() {
     document.getElementById("myForm").style.display = "none";
     document.getElementById("myForm").parentElement.style.display = "none";
 }
.open-button {
            background-image: url(/usr/fsociety/indiepump_test/test_4/social_icons/email.png);
            background-repeat: no-repeat;
            background-color: transparent;
            padding: 17px 21px;
            border: none;
            cursor: pointer;
            position: fixed;
            justify-content: space-between;
            align-items: center;
            vertical-align: middle;
            text-align: right;
            text-decoration: none;
            font-size: 0.9rem;
            margin-left: 1rem;
            height: 27px;
            width: 121px;
            padding: 3px 3px;
            padding-left: 3px;
            color: red;
        }

        .form-popup {
            display: none;
            position: fixed;
            align-items: center;
            justify-content: space-between;
            vertical-align: middle;
            bottom: 2.5rem;
            left: 2rem;
            border: 1px solid red;
            border-radius: 10px;
            color: red;
            font-size: 0.7rem;
            z-index: 10000;
        }

        .form-container {
            display: flex;
            max-width: 300px;
            width: 300px;
            height: 50px;
            align-items: center;
            justify-content: space-between;
            vertical-align: middle;
            text-align: center;
            padding: 10px;
            background-color: #f9e3d5;
            z-index: 100000;
        }

        .btn-cancel {
            display: flex;
            align-items: center;
            margin-bottom: 1rem;
            vertical-align: middle;
            text-align: center;
            width: 25px;
            height: 25px;
            border: none;
            background-color: transparent;
            color: red;
            font-size: 1.9rem;
            cursor: pointer;
        }
<button class="open-button" onclick="openForm()">
        Contact Us
    </button>
    <div class="form-popup">
        <form class="form-container" id="myForm">
            <h1>info@indiepump.com</h1>
            <button type="button" class="btn-cancel" onclick="closeForm()">&times;</button>
        </form>
    </div>
Alireza Ahmadi
  • 8,579
  • 5
  • 15
  • 42
  • and I tried it with your suggestion but now the button doesn't do anything...I want the popup to stay hidden when the page is first loaded and only visible when the onclick event occurs...Is there another way to do that ? – Andrew Mokas Aug 22 '21 at 11:39
  • @AndrewMokas what do you mean by `now the button doesn't do anything`? look at my snippet it is working as you said. when page is loading is it hidden but when you click it is appeared – Alireza Ahmadi Aug 22 '21 at 11:41
  • Right now I've used secondary
    to my form...to show to my script what to open but...still not working
     – Andrew Mokas Aug 22 '21 at 11:46
  • @AndrewMokas show me the new html form then I am going to update my answer with your new html – Alireza Ahmadi Aug 22 '21 at 11:48
  • I mean...when I press the button of the html the onclick event of the script doesn't start at all...the page reloads but no form shows – Andrew Mokas Aug 22 '21 at 11:49
  • @AndrewMokas As you see my snippet works correctly right? So you need to compare my snippet with your code to detect the changes – Alireza Ahmadi Aug 22 '21 at 11:51
  • ..I think this will help me...what do you say ?...https://stackoverflow.com/questions/21070101/show-hide-div-using-javascript – Andrew Mokas Aug 22 '21 at 12:22
0

@Alireza Ahmadi

Reposting the new code...

                  function openForm() {
                    document.getElementById("myForm").parentElement.style.display = "flex";
                    document.getElementById("myForm").style.display = "flex";
                  }
                  function closeForm() {
                    document.getElementById("myForm").style.display = "none";
                    document.getElementById("myForm").parentElement.style.display = "none";
                  }
.open-button {
      background-image: url(/usr/fsociety/indiepump_test/test_4/social_icons/email.png);
      background-repeat: no-repeat;
      background-color: transparent;
      padding: 17px 21px;
      border: none;
      cursor: pointer;
      position: fixed;
      justify-content: space-between;
      align-items: center;
      vertical-align: middle;
      text-align: right;
      text-decoration: none;
      font-size: 0.9rem;
      margin-left: 1rem;
      height: 27px;
      width: 121px;
      padding: 3px 3px;
      padding-left: 3px;
      color: red;
    }
    
    .form-popup {
      display: none;
      position: fixed;
      align-items: center;
      justify-content: space-between;
      vertical-align: middle;
      bottom: 2.5rem;
      left: 2rem;
      border: 1px solid red;
      border-radius: 10px;
      color: red;
      font-size: 0.7rem;
      z-index: 10000;
    }
    
    .div-form {
      display: flex;
      max-width: 300px;
      width: 300px;
      height: 50px;
      align-items: center;
      justify-content: space-between;
      vertical-align: middle;
      text-align: center;
      padding: 10px;
      background-color: #f9e3d5;
      z-index: 100000;
    }
    
    .btn-cancel {
      display: flex;
      align-items: center;
      margin-bottom: 1rem;
      vertical-align: middle;
      text-align: center;
      width: 25px;
      height: 25px;
      border: none;
      background-color: transparent;
      color: red;
      font-size: 1.9rem;
      cursor: pointer;
    }
 <button class="open-button" onclick="openForm()">
                Contact Us</button>
                <div class="form-popup">
                  <div class="div-form" id="myForm">
                  <form class="form-container">
                  <h1>info@indiepump.com</h1>
                  <button type="button" class="btn-cancel" onclick="closeForm()">&times;</button>
                  </form>
                </div>
                </div>

Right now the button doesn't do anything the page only shows that is refreshing

Alireza Ahmadi
  • 8,579
  • 5
  • 15
  • 42
Andrew Mokas
  • 23
  • 5