CODEWITHSUNDEEP
javascriptjqueryhtmlforms
eabates
eabates

Reputation: 898

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

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?

Upvotes: 0

Views: 904

Answers (4)

Ashish Kumar
Ashish Kumar

Reputation: 1

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

Upvotes: 0

Pao Im
Pao Im

Reputation: 347

$(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>

Upvotes: 0

spaniol6
spaniol6

Reputation: 606

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>

Upvotes: 0

CoderPi
CoderPi

Reputation: 13221

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>

Upvotes: 1

Related Questions