Javascript to trigger submit when enter is pressed

Question

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>

I've removed your [tag:java] question tag. Please understand that Java and JavaScript are two completely different languages, that questions tags and question titles are the most important parts of your question, and that if either are off, you won't get the correct experts to see your question. — Hovercraft Full Of Eels, Dec 07 '18 at 00:24
Possible duplicate of [Trigger a button click with JavaScript on the Enter key in a text box](https://stackoverflow.com/questions/155188/trigger-a-button-click-with-javascript-on-the-enter-key-in-a-text-box) — Abana Clara, Dec 07 '18 at 00:33

score 0 · Answer 1 · answered Dec 07 '18 at 00:27

Just replace your input // submit with button and move the function to the form element using onSubmit

<!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" onSubmit="checkPswd()">
        <input id="pass" type="password" id="pass" name="password">
        <button type="submit">submit</button>
</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>

score 0 · Accepted Answer · answered Dec 07 '18 at 00:35

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>

score 0 · Answer 3 · answered Dec 07 '18 at 04:30

0

Just put a

<button type="submit">Submit</button>

inside your form.

answered Dec 07 '18 at 04:30

Adrian Brand

20,384
4
39
60

Javascript to trigger submit when enter is pressed

3 Answers3