Question 233477 in PHP Question posted in
Official manual can be found here.

Php – Modal can't display after submitting form

I have a problem where i can’t display my modal after submitting my register form.
Here is my HTML code:

<div class="modal" style="width: 450px;">
        <div class="modal-header" style="background-color: #f0f0f0; padding: 15px;">
            <span style="color: #a2a4a6; font-size: 22px;">Register</span>
        </div>
        
        <div class="modal-content" style="background-color: white; padding-top: 20px; padding-left: 25px; padding-right: 25px; padding-bottom: 55px;">
            <form class="frm-register" method="post" action="register.php">
                <label for="username">Username</label>
                <input type="text" id="username" name="username" placeholder="Enter your username" maxlength="32" required style="display: block; border-radius: 5px; font-size: 16px; border: 2px solid #a2a4a6; padding: 13px; margin-top: 15px; margin-bottom: 20px; width: 90%;">
                
                <label for="email">Email</label>
                <input type="email" id="email" name="email" placeholder="[email protected]" maxlength="254" required style="display: block; border-radius: 5px; font-size: 16px; border: 2px solid #a2a4a6; padding: 13px; margin-top: 15px; margin-bottom: 20px; width: 90%;">
                
                <label for="password">Password</label>
                <i class="bi bi-eye-slash" id="togglePassword" style="cursor: pointer; position: fixed; top: 75%; left: 85%;"></i>
                <input type="password" id="password" name="password" placeholder="Enter your password" maxlength="30" required style="display: block; border-radius: 5px; font-size: 16px; border: 2px solid #a2a4a6; padding: 13px; margin-top: 15px; margin-bottom: 20px; width: 90%;">
                
                <input type="submit" name="register" value="Register" style="float: right; border: 0; text-transform: uppercase; color: #fff; cursor: pointer; padding: 10px; background-color: #7d4a95; font-size: 16px; border-radius: 5px;">
            </form>
        </div>
    </div>
    
    <div class="notif"> 
        <div id="notif-modal" class="modal" style="display: none; background-color: rgba(44, 40, 40, 0.4); width: 550px; height:520px; position: fixed; top: -40px; left: -50px;">
            <div class="modal-content" style="background-color: #fefefe; border: 1px solid #888; width: 60%; margin: 50px auto;"> 
                <div class="modal-body" style="text-align: center; margin-bottom: 110px; margin-top: 50px;"> 
                    <table border="0"> 
                        <tr> 
                            <td> 
                                <img src="img/warning.png" id="icon" alt="gambar" width="100px" height="100px" style="margin-left: 110px; margin-right: 110px; margin-bottom: 20px;"> 
                            </td> 
                        </tr> 
                        <tr> 
                            <td> 
                                <span id="description"></span> 
                            </td> 
                        </tr> 
                        <tr> 
                            <td> 
                                <input type="button" id="confirm-notif" value="Ok" style="background-color: #7d4a95; color: white; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; margin-top: 20px;"> 
                            </td> 
                        </tr> 
                    </table> 
                </div> 
            </div> 
        </div> 
    </div>

Here is my javascript and php code where i try to display the modal after the form is submitted:

<?php
if(isset($_POST["register"])) {
    echo "<script>
                var notif = document.getElementById('notif-modal');
                var description = document.getElementById('description');
                
                description.textContent = 'Email ini telah digunakan oleh akun lain!';
                notif.style.display = 'block';
            </script>";
}

?>

Anyone know what is the problem? Please help me

Tags:

2

Answers


  1. 0

    The JavaScript code is placed before the HTML element it references (notif-modal). Since JavaScript code is executed sequentially, the code will run before the HTML element is loaded, resulting in a reference error. To resolve this, you should move the JavaScript code to the end of the HTML document, just before the closing tag.

    <!-- Your HTML code -->

<script>
    // Move the JavaScript code outside the PHP echo statement and place it at the end of the HTML document

    var notif = document.getElementById('notif-modal');
    var description = document.getElementById('description');
    
    <?php
    if(isset($_POST["register"])) {
        echo "description.textContent = 'Email ini telah digunakan oleh akun lain!';";
        echo "notif.style.display = 'block';";
    }
    ?>
</script>
    Login or Signup to reply.
  2. 0

    Put the call PHP post function in the script code and that part should be positioned at the end of your file.

    <!-- Your HTML code -->

<script>
    // Move the JavaScript code outside the PHP echo statement and place it at the end of the HTML document

    var notif = document.getElementById('notif-modal');
    var description = document.getElementById('description');
    
    <?php
    if(isset($_POST["register"])) {
        echo "description.textContent = 'Email ini telah digunakan oleh akun lain!';";
        echo "notif.style.display = 'block';";
    }
    ?>
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search