Search code examples
javascripthtmlcssenter

Javascript to trigger submit when enter is pressed


I Have a password form and I want the enter key to trigger the submit button but I can't seem to get it to work. I know they can view source to see password this is just for practice example.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form>
        <input id="user" type="text" name="username" 
placeholder="username">
        <input id="pass" type="password" id="pass" name="password">
        <input id="subm"type="button" name="submit" value="submit" 
onclick="checkPswd();">
</form>    
</body>

<script type="text/javascript">  
       function checkPswd(){
        var confirmpassword = "admin";
        var username = document.getElementById('user').value;
        var password = document.getElementById("pass").value;

            if(password == confirmpassword){

                window.location.href = "redu.html";

            }else{
                alert('try again');
            }

       };

 </script>    
</html>

Solution

  • you need to add id, action, submit type, prevent default and listener. checkout my snippet..

    have a nice day!

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        
        <!-- add id and action -->
        <form id="example" action="#">
            <input id="user" type="text" name="username" placeholder="username">
            <input id="pass" type="password" id="pass" name="password">
    
            <!-- change type to submit -->
            <input id="subm" type="submit" name="submit" value="submit">
        </form>    
    </body>
    
    <script type="text/javascript"> 
    
    //add listener
    document.getElementById("example").addEventListener("submit", checkPswd, true);
    
    function checkPswd(){
        var confirmpassword = "admin";
        var username = document.getElementById('user').value;
        var password = document.getElementById("pass").value;
    
        if(password == confirmpassword){
    
            window.location.href = "redu.html";
    
        }else{
            alert('try again');
        }
    
        //add prevent default
        event.preventDefault();
    };
    
    </script>    
    </html>