HTML Input type button onclick event not working

Question

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@example.com" 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: 19421317_veri_v@widyadharma.ac.id\n");
                        
                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".

**Warning:** You are wide open to [SQL Injections](https://php.net/manual/en/security.database.sql-injection.php) and should use parameterized **prepared statements** instead of manually building your queries. They are provided by [PDO](https://php.net/manual/pdo.prepared-statements.php) or by [MySQLi](https://php.net/manual/mysqli.quickstart.prepared-statements.php). Never trust any kind of input! Even when your queries are executed only by trusted users, [you are still in risk of corrupting your data](http://bobby-tables.com/). [Escaping is not enough!](https://stackoverflow.com/q/32391315) — Dharman, Aug 26 '23 at 11:10

score 0 · Answer 1 · answered Aug 26 '23 at 01:58

0

The variable "confirm" could be conflicting with the js "confirm" function

answered Aug 26 '23 at 01:58

David Ahonkhai

54
6

HTML Input type button onclick event not working

1 Answers1