Submitting form in JS using enter key instead of a submit button

Question

I am inexperienced with forms but want to pass the text from an input field to the rest of my code whenever the user presses the enter key in the input field (I am testing it with an alert at the moment but can't get it to fire). I am using the following JS:

 $(document).ready(function() { $("#task").keypress(function(event) { if (event.which == 13) { event.preventDefault(); alert("test"); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form class="form" action=" " method="get" autocomplete="off" role="form" autofocus> <div class="form-group"> <input class="form-control input-lg" type="text" autofocus id="task" placeholder="Enter your task:"> </div> </form> 

Is it possible that I need to adjust the "action" field?

Answer 1

Solution:

<input id="task" class="form-control input-lg" type="text" autofocus 
    placeholder="Enter your task:">

document.getElementById("task").onkeydown = function (event) {
    event = event || window.event;
    if(event.keyCode == 13) {
         // Enter was pressed
    }
}

Demo:

 document.getElementById("task").onkeydown = function(event) { event = event || window.event; document.getElementById("exampleOutput").innerHTML = event.keyCode if (event.keyCode == 13) { // Enter was pressed // Example: document.getElementById("exampleOutput").innerHTML += " Enter" } } 

 <input id="task" class="form-control input-lg" type="text" autofocus id="task" placeholder="Enter your task:"> <div id="exampleOutput"></div> 

Answer 2

 $(document).ready(function() { $('input[type=text]').on('keyup', function(e) { if (e.which == 13) { e.preventDefault(); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form class="form" action=" " method="get" autocomplete="off" role="form" autofocus> <div class="form-group"> <input class="form-control input-lg" type="text" autofocus id="task" placeholder="Enter your task:"> </div> </form> 

Answer 3

EDIT: Just tried your code in a jsfiddle and it works. Did you include JQuery before the scripts?

You can bind the keypress event to the form instead like this. This way there won't be an event tied to every input you have. This event will fire when enter is pressed on any input in the form.

 $(document).ready(function() { $(".form").on("keypress", ":input", function(e) { if (e.which == 13) { e.preventDefault(); alert("form submitted"); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form class="form" action=" " method="get" autocomplete="off" role="form" autofocus> <div class="form-group"> <input class="form-control input-lg" type="text" autofocus id="task" placeholder="Enter your task:"> </div> </form> 

Answer 4

used your code in Fiddle ..it is working fine..find a fiddle demo of the same below

$("#task").keypress(function (event) {
    var key = event.which;
    if (key == 13) {
        event.preventDefault();
        alert($(this).val());

        }
    });

Demo