Php - HTML Input type button onclick event not working

VeriVirgandra
August 26, 2023
449 views
0 votes
2 Answers

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".

Answers

- DavidAhonkhai
- August 26, 2023 at 3:58 am
- 0 votes
0
The variable "confirm" could be conflicting with the js "confirm" function

Login or Signup to reply.

The problem is that the onclick event handler is not being attached to the confirm-notif element.

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() {
    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";
        }
    }
}

Please signup or login to give your own answer.

Click here to cancel reply.

Php – HTML Input type button onclick event not working

Answers