I am trying to close my "notif-modal" when clicking "confirm-notif" but it didn’t work.
Here is my HTML and PHP code:
<div class="content">
<div class="modal" style="width: 450px;">
<div class="modal-header" style="background-color: #f0f0f0; padding: 15px;">
<span style="color: #a2a4a6; font-size: 22px;">Reset Password</span>
</div>
<div class="modal-content" style="background-color: white; padding-top: 20px; padding-left: 25px; padding-right: 25px; padding-bottom: 55px;">
<form id="frm-email" class="frm-email" method="post" style="display: block;">
<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%;">
<input type="submit" name="send" value="Send OTP" 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 id="frm-otp" style="text-align: center; display: none;">
<div id="input-field" class="inputfield" style="width: 100%; display: flex; justify-content: space-around">
<input id="field-1" type="number" maxlength="1" oninput="this.value=this.value.slice(0,this.maxLength)" onkeyup="moveOnMax(document.getElementById('field-1'), document.getElementById('field-2'))" class="input" style="height: 40px; width: 40px; border: 2px solid #dad9df; outline: none; text-align: center; font-size: 22px; border-radius: 3px;">
<input id="field-2" type="number" maxlength="1" oninput="this.value=this.value.slice(0,this.maxLength)" onkeyup="moveOnMax(document.getElementById('field-2'), document.getElementById('field-3'))" class="input" style="height: 40px; width: 40px; border: 2px solid #dad9df; outline: none; text-align: center; font-size: 22px; border-radius: 3px;">
<input id="field-3" type="number" maxlength="1" oninput="this.value=this.value.slice(0,this.maxLength)" onkeyup="moveOnMax(document.getElementById('field-3'), document.getElementById('field-4'))" class="input" style="height: 40px; width: 40px; border: 2px solid #dad9df; outline: none; text-align: center; font-size: 22px; border-radius: 3px;">
<input id="field-4" type="number" maxlength="1" oninput="this.value=this.value.slice(0,this.maxLength)" onkeyup="moveOnMax(document.getElementById('field-4'), document.getElementById('field-5'))" class="input" style="height: 40px; width: 40px; border: 2px solid #dad9df; outline: none; text-align: center; font-size: 22px; border-radius: 3px;">
<input id="field-5" type="number" maxlength="1" oninput="this.value=this.value.slice(0,this.maxLength)" onkeyup="moveOnMax(document.getElementById('field-5'), document.getElementById('field-6'))" class="input" style="height: 40px; width: 40px; border: 2px solid #dad9df; outline: none; text-align: center; font-size: 22px; border-radius: 3px;">
<input id="field-6" type="number" maxlength="1" oninput="this.value=this.value.slice(0,this.maxLength)" class="input" style="height: 40px; width: 40px; border: 2px solid #dad9df; outline: none; text-align: center; font-size: 22px; border-radius: 3px;">
</div>
<button id="btn-reset" onClick="checkOTP()" style="margin-top: 20px; background-color: #7d4a95; border: none; outline: none; font-size: 16px; padding: 10px; color: white; border-radius: 3px; cursor: pointer;">Reset Password</button>
</div>
<form id="frm-reset" class="frm-reset" method="post" style="display: none;">
<label for="email">Password Baru</label>
<i class="bi bi-eye-slash" id="togglePassword" style="cursor: pointer; position: fixed; top: 53%; 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="save" value="Save" 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" style="display: none; background-color: rgba(44, 40, 40, 0.4); width: 550px; height:520px; position: fixed; top: -150px; left: -70px;">
<div style="background-color: #fefefe; border: 1px solid #888; width: 60%; margin: 50px auto;">
<div style="margin-top: 50px; text-align: center; margin-bottom: 110px;">
<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; width: 70px;">
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<?php
include "db.php";
if(isset($_POST["send"])) {
$email = $_POST['email'];
$result = mysqli_query($conn, "SELECT * FROM tb_user WHERE email = '" .$email. "'");
$row = mysqli_num_rows($result);
if($row < 1) {
echo "<script>
var notif = document.getElementById('notif-modal');
var description = document.getElementById('description');
description.textContent = 'Email yang diinputkan tidak terdaftar pada database!';
notif.style.display = 'block';
</script>";
} else {
$otp = rand(100000, 999999);
$_SESSION["otp"] = $otp;
mysqli_query($conn, "UPDATE tb_user SET otp='" .$otp. "' WHERE email='" .$email. "'");
mail($_POST['email'], "Reset Password", "The code for resetting your password is ".$otp, "From: [email protected]");
echo "<script>
var notif = document.getElementById('notif-modal');
var description = document.getElementById('description');
description.textContent = 'Kode untuk mereset password Anda telah dikirim ke email Anda!';
notif.style.display = 'block';
var frmEmail = document.getElementById('frm-email');
frmEmail.style.display = 'none';
var frmOTP = document.getElementById('frm-otp');
frmOTP.style.display = 'block';
</script>";
}
}
if(isset($_POST["save"])) {
mysqli_query($conn, "UPDATE tb_user SET password='" .$_POST['password']. "' WHERE email='" .$email. "'");
echo "<script>
var notif = document.getElementById('notif-modal');
var description = document.getElementById('description');
description.textContent = 'Password Anda telah diubah. Silahkan kembali ke halaman Login!';
notif.style.display = 'block';
</script>";
}
?>
</div>
Here is my Javascript code :
<script>
function moveOnMax(field, nextField) {
if(field.value.length >= field.maxLength) {
nextField.focus();
}
}
const togglePassword = document.querySelector("#togglePassword");
const password = document.querySelector("#password");
togglePassword.addEventListener("click", function () {
const type = password.getAttribute("type") === "password" ? "text" : "password";
password.setAttribute("type", type);
this.classList.toggle("bi-eye");
});
var confirm = document.getElementById("confirm-notif");
var notif = document.getElementById("notif-modal");
var description = document.getElementById("description");
confirm.onclick = function() {
if (description == "Password Anda telah diubah. Silahkan kembali ke halaman Login!") {
notif.style.display = "none";
window.location.href = "index.php";
} else {
notif.style.display = "none";
}
}
function checkOTP() {
var userInput = "";
var inputs = document.getElementById("input-field").getElementsByTagName("input");
var description = document.getElementById("description");
for(var i=0; i<inputs.length; i++) {
userInput += inputs[i].value;
}
if(userInput.length < 6) {
description.textContent = "Kode yang diinputkan tidak lengkap!";
notif.style.display = "block";
} else {
var otp = '<?php echo $_session["otp"]?>';
if (userInput == otp) {
var frmOTP = document.getElementById('frm-otp');
frmOTP.style.display = 'none';
var frmReset = document.getElementById('frm-reset');
frmReset.style.display = 'block';
} else {
description.textContent = "Kode yang diinputkan salah!";
notif.style.display = "block";
}
}
}
</script>
Please tell me what did i do wrong.
I also have tried to put the onclick event directly in the "confirm-notif" and it work just fine. But when i move the onclick event inside the script, it didn’t work. Please help me.
Note: I have delete the onclick event code that i put directly in the "confirm-notif".
2
Answers
The variable "confirm" could be conflicting with the js "confirm" function
The problem is that the
onclick
event handler is not being attached to theconfirm-notif
element.