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