4

UPDATE: I am constructing the form via Javascript, so the form is not there on page load.

I have an input field with id="input", whenever the enter key is pressed, the form gets submitted. So I tried handling it like this. 

$("#input").keydown(function (e) { if (e.keyCode == 13) { alert("enter pressed"); return false; } });

However this does not work, there is no alert and the form still gets sent. How do I solve this?

Improve this question
5
  • I think you are referring to the submit event Commented May 10, 2017 at 21:29
  • @funcoding yes exactly Commented May 10, 2017 at 21:35
  • So change your code to use submit instead of keydown event Commented May 10, 2017 at 21:36
  • hitting enter to submit a form, when inside of a text input, is expected behavior for many users. As standard text inputs don't allow for character returns, I'd ask why someone is hitting enter when in one of these inputs to begin with? Commented May 11, 2017 at 4:00
  • @scottohara right they shouldn't but I want to write a function to prevent this Commented May 11, 2017 at 14:35

5 Answers 5

Reset to default
2

Use preventDefault() to prevent the form from submitting.

$("#input").keydown(function (e) { if (e.keyCode == 13) { alert("enter pressed"); e.preventDefault(); } });

Example with a form:

$('form').submit(function(e){ e.preventDefault(); });

https://jsfiddle.net/aya6ockv/

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

Use onkeypress attribute in your input as follows: 

<input type="text" onkeypress="myFunction(event)"> <script> function myFunction(event) { var x = event.which || event.keyCode; if(x == 13) { alert("enter pressed"); return false; } } </script>
Improve this answer

1 Comment

I get the alert message, however, return false is not stopping the form from being submitted
0

I would do it like this and change 'form' to #input. Unless you want to stop this enter submission site wide, then this as is should work well.

$("form").bind("keypress", function(e) { if (e.keyCode == 13) { return false; } });
Improve this answer

Comments

0

Just created a JSFiddle that shows that it works. Check it out

$('#input').keydown(function (e) { if (e.keyCode == 13) { alert('alert pressed'); return false; } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="my-form"> <input text="name" id="input"> <button type="submit">Submit</button> </form>

Improve this answer

3 Comments

does this have to go into the document.ready function or can it be an independent function
I don't understand why this is not working for me, could it be that my form is constructed via Javascript instead of on page load
even if the form is constructed via Javascript?
-1

return false is more efficient than e.preventdefault(). Please look at event.preventDefault() vs. return false

$("#input").keydown(function (e) { if (e.which == 13) { alert("enter pressed"); return false; } });

Improve this answer

1 Comment

if you are using, you can reliably use "which". i just updated my answer. And I suggest instead of using keydown use "keypress".