CODEWITHSUNDEEP
javascriptphphtml
BruceyBandit
BruceyBandit

Reputation: 4324

How to display modals on a page based on which button is clicked

Apologies for slightly length code. I am trying to get modals opening on the page but nothing is happening and I am running out of ideas.

Basically if the user selects the 'Access Course' button, the modal with div id01 should appear with it's form. If the 'Reset Access Code' button is clicked, it will only show the modal related to id02.

I'm not sure what I am doing wrong here. I know within in the commented out code, if I uncomment that and removed the modalFuntion(), then what happens is that if I click on 'Reset Access Code' button, nothing happens, if I click 'Access Course' button, both modals show up.

Code:

     <body>
        
            <div style="text-align: center; margin-top: 2em;">

                <img src="static/images/logo.png">

        <h2>INTRODUCTION TO SOFTWARE TESTING ONLINE COURSE</h2>
        
        <!--<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Access Course</button>-->
        <!--<br/><br/>-->
        <!--<button class="buttonLink" onclick="document.getElementById('id02').style.display='block'" style="width:auto;">Forget Access Code</button>-->
        
        <button onclick="modalFunction()" style="width:auto;">Access Course</button>
        <br/><br/>
        <button class="buttonLink" onclick="modalFunction()" style="width:auto;">Forget Access Code</button>
        
            </div>

        <div id="id01" class="modal">
          
          <form class="modal-content animate" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
            <div class="imgcontainer">
              <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">&times;</span>
            </div>
        
            <div class="container">
              <label for="username"><b>Email</b></label>
              <input type="text" placeholder="Enter Email" name="username" required>
              <span class="help-block"><?php echo $username_err; ?></span>
                <br/><br/>
              <label for="password"><b>Access Code</b></label>
              <input type="text" placeholder="Enter Access Code" name="password" required>
              
              <span class="help-block"><?php echo $password_err; ?></span>
                
              <button type="submit" value="Login" name="Login">Enter</button>
          </form>
        </div>
        
        
        
        <div id="id02" class="modal">
          
          <form class="modal-content animate" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
            <div class="imgcontainer">
              <span onclick="document.getElementById('id02').style.display='none'" class="close" title="Close Modal">&times;</span>
            </div>
        
            <div class="container">
                  
              <label for="reset-email"><b>Enter your email to reset your Access Code</b></label>
              <input type="text" placeholder="Enter Email" name="reset username" required>
              <span class="help-block"><?php echo $reset_username_err; ?></span>
                
              <button type="submit" value="Reset" name="Reset">Reset</button>
          </form>
        </div>
        
        
        <script>
        // Get the modal
        var modal = document.getElementById('id01');
        var modal2 = document.getElementById('id02');
        
        // When the user clicks anywhere outside of the modal, close it
        window.onclick = function(event) {
            if (event.target == modal) {
                modal.style.display = "none";
            }else if (event.target == modal2){
                modal2.style.display = "none";
            }
        }
        
        function modalFunction(){
            
        document.getElementsByName("Login").onclick = function() {
            modal.style.display = "block";
            modal2.style.display = "none";
        }
        
        document.getElementsByName("Reset").onclick = function() {
            modal2.style.display = "block";
            modal.style.display = "none";
        }
        }
        
        </script>
        <?php if($_SERVER["REQUEST_METHOD"] == "POST"){
            switch ($_POST["submit"]) {
            case "Login":
                echo "<script>document.getElementById('id01').style.display='block';</script>";
              break;
          case "Reset":
              echo "<script>document.getElementById('id02').style.display='block';</script>";
              break;
          default:
              break;
            }
            
  }
    ?>

Upvotes: 0

Views: 484

Answers (1)

lvilasboas
lvilasboas

Reputation: 76

The closing tags of both you modal's contents are inverted.

They both are closing first the form and then the div, but it should be the other way around, and also there's a </div> missing (I've improved the identation to help better visualize the problem):

<div id="id01" class="modal">
    <form class="modal-content animate" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
        <div class="imgcontainer">
            <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">&times;</span>
        </div>
    
        <div class="container">
            <label for="username"><b>Email</b></label>
            <input type="text" placeholder="Enter Email" name="username" required>
            <span class="help-block"><?php echo $username_err; ?></span>
            <br/><br/>
            <label for="password"><b>Access Code</b></label>
            <input type="text" placeholder="Enter Access Code" name="password" required>
            <span class="help-block"><?php echo $password_err; ?></span>    
            <button type="submit" value="Login" name="Login">Enter</button>
        </div>
    </form>
</div>

And the same thing goes for the id="id02" modal.

Upvotes: 1

Related Questions