CODEWITHSUNDEEP
javascripthtmlcss
RileyP
RileyP

Reputation: 23

Modal Will Not Display

I am approximately 24 seconds away from lighting my underwear on fire in frustration.

Essentially, I am making a simple contact info form that will submit the inputs to an external PHP page for processing, and, relevant to this question, pops up a second modal upon submission that confirms to the user that the form was sent. Figuring out how to get the form to stay on the same page when you press 'submit' is a problem for another day; what I don't understand is why the second modal, the one that says "Thank you for your interest etc. etc.", will not appear when you hit the 'submit' button. It's driving me crazy!

Thanks for your help, I'm an amateur coder and am open to any and all advice/critique.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<style>
    .modal {
    display: none;
    position: fixed;
    z-index: 1;
    overflow: scroll;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid;
    width: 95%;
    position: relative;
}

.modal2 {
    display: none;
    position: fixed;
    z-index: 1;
    overflow: scroll;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal2-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid;
    width: 95%;
    position: relative;
}
</style>

<button id="myButton">Contact</button>

<div id="myModal" class="modal">
    <div action="" class="modal-content">
        <span id="close">&times;</span>
        <p class="formHeader">Let's Work Together...</p>
        <p id="formSubheader">Name</p>
        <input type="type" name="firstName" placeholder="First" class="inputBox1">
        <input type="type" name="lastName" placeholder="Last" class="inputBox1">
        <p id="formSubheader">Email</p>
        <input type="email" name="email" placeholder="[email protected]" class="inputBox2">
        <p id="formSubheader">Phone</p>
        <input type="tel" name="phone" class="inputBox3" placeholder="###-###-####">
        <p id="formSubheader">Project Description</p>
        <textarea name="description" class="inputBox4"></textarea>
        <br>
        <button type="submit" id="myButton2">Submit</button>
    </div>
</div>

<div id="myModal2" class="modal2">
    <div class="modal2-content">
        <span id="close">&times;</span>
        <p class="formHeader2">Thank you for your interest. I will get back to you soon!</p>
    </div>
</div>

<script>
    var modal = document.getElementById("myModal");
    var modal2 = document.getElementById("myModal2");
    var btn = document.getElementById("myButton");
    var btn2 = document.getElementById("myButton2");
    var close = document.getElementById("close");

    btn.onclick = function() {
        modal.style.display = "block";
    }
    btn2.onclick = function() {
        modal.style.display = "none";
        modal2.style.display = "block";
    }
    close.onclick = function() {
        modal.style.display = "none";
    }
    window.onclick = function(event) {
        if (event.target == modal) 
            modal.style.display = "none";
            modal2.style.display = "none";
        }
    </script>
</body>
</html>

Upvotes: 2

Views: 43

Answers (1)

mwilson
mwilson

Reputation: 12900

Your problem is this chunk of code here:

    window.onclick = function(event) {
    if (event.target == modal) 
        modal.style.display = "none";
        modal2.style.display = "none";
    }

I'm not sure what you are intending to do with that, but remember, if no curly braces are provided with your if statement, then only the line directly after your if condition will execute. Your second line will always execute. So you are effectively hiding modal2 on every single click event (since your listening to window.onclick). I don't think you want that.

Example:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>

  <style>
    .modal {
      display: none;
      position: fixed;
      z-index: 1;
      overflow: scroll;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.4);
      /* Black w/ opacity */
    }
    
    .modal-content {
      background-color: #fefefe;
      margin: auto;
      padding: 20px;
      border: 1px solid;
      width: 95%;
      position: relative;
    }
    
    .modal2 {
      display: none;
      position: fixed;
      z-index: 1;
      overflow: scroll;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.4);
      /* Black w/ opacity */
    }
    
    .modal2-content {
      background-color: #fefefe;
      margin: auto;
      padding: 20px;
      border: 1px solid;
      width: 95%;
      position: relative;
    }
  </style>

  <button id="myButton">Contact</button>

  <div id="myModal" class="modal">
    <div action="" class="modal-content">
      <span id="close">&times;</span>
      <p class="formHeader">Let's Work Together...</p>
      <p id="formSubheader">Name</p>
      <input type="type" name="firstName" placeholder="First" class="inputBox1">
      <input type="type" name="lastName" placeholder="Last" class="inputBox1">
      <p id="formSubheader">Email</p>
      <input type="email" name="email" placeholder="[email protected]" class="inputBox2">
      <p id="formSubheader">Phone</p>
      <input type="tel" name="phone" class="inputBox3" placeholder="###-###-####">
      <p id="formSubheader">Project Description</p>
      <textarea name="description" class="inputBox4"></textarea>
      <br>
      <button type="submit" id="myButton2">Submit</button>
    </div>
  </div>

  <div id="myModal2" class="modal2">
    <div class="modal2-content">
      <span id="close">&times;</span>
      <p class="formHeader2">Thank you for your interest. I will get back to you soon!</p>
    </div>
  </div>

  <script>
    var modal = document.getElementById("myModal");
    var modal2 = document.getElementById("myModal2");
    var btn = document.getElementById("myButton");
    var btn2 = document.getElementById("myButton2");
    var close = document.getElementById("close");

    btn.onclick = function() {
      modal.style.display = "block";
    }
    btn2.onclick = function() {
      modal.style.display = "none";
      modal2.style.display = "block";
    }
    close.onclick = function() {
      modal.style.display = "none";
    }

    window.onclick = function(event) {
      if (event.target == modal) {
        modal.style.display = "none";
        modal2.style.display = "none";
      }
    }
  </script>
</body>

</html>

Upvotes: 3

Related Questions