Submitting a form on Enter with jQuery

Question

I have a bog-standard login form - an email text field  a password field and a submit button on an AIR project that s using HTML jQuery   When I hit Enter on the form  the entire form s contents vanish  but the form isn t submitted   Does anyone know if this is a Webkit issue  Adobe AIR uses Webkit for HTML   or if I ve bunged things up   I tried        input   keypress function  e      if  e which    13           form login   submit              But that neither stopped the clearing behavior  or submitted the form   There s no action associated with the form - could that be the issue   Can I put a javascript function in the action

User · Answer

Is there any reason you have to hook and test for the enter key?

Couldn't you simply add a

<input type="submit" />

to your form and have it naturally be submitted when enter is pushed? You could even then hook the form's onsubmit action and call a validation function from there if you wanted...

You could even use the onsubmit as a test to see if your form is being submitted, but it won't work if you call form.submit().

User · Answer

input   keypress function  e      if  e which    13           form login   submit        return false        lt ---- Add this line           Check out this stackoverflow answer  event preventDefault   vs  return false  Essentially   return false  is the same as calling e preventDefault and e stopPropagation

User · Answer

In addition to return false as Jason Cohen mentioned   You may have to also preventDefault  e preventDefault

User · Answer

I use now      form   submit function event           At first I added an eventhandler to the submit button which produced an error for me

User · Answer

Here s a way to do this as a JQuery plugin  in case you want to re-use the functionality      fn onEnterKey       function  closure               this  keypress              function  event                     var code   event keyCode   event keyCode   event which                   if  code    13                        closure                        return false                                             Now if you want to decorate an  lt input gt  element with this type of functionality it s as simple as this       your-input-id   onEnterKey      function                Do stuff here

User · Answer

You can also simply add onsubmit  return false  to the form code in the page to prevent the default behaviour   Then hook   bind or  live  the form s submit event to any function with jQuery in the javascript file   Here s a sample code to help   HTML   lt form id  search form  onsubmit  return false  gt      lt input type  text  id  search field   gt      lt input type  button  id  search btn  value  SEARCH   gt   lt  form gt    Javascript   jQuery    document  ready function              search form   live  submit   function             any function                 This is working as of 2011-04-13  with Firefox 4 0 and jQuery 1 4 3

User · Answer

Return false to prevent the keystroke from continuing

User · Answer

Don t know if it will help  but you can try simulating a submit button click  instead of directly submitting the form  I have the following code in production  and it works fine           input   keypress function e            if e which    13                jQuery this  blur                jQuery   submit   focus   click                        Note  jQuery   submit   focus   makes the button animate when enter is pressed

User · Answer

This is my code         txtMessage   on   keypress   function event        if  event which    13  amp  amp   event shiftKey            event preventDefault                frSendMessage   submit

User · Answer

Just adding for easy implementation  You can simply make a form and then make the submit button hidden   For example    lt form action  submit php  method  post  gt  Name    lt input type  text  name  test  gt   lt input type  submit  style  display  none   gt   lt  form gt

User · Answer

In HTML codes    lt form action  POST  onsubmit  ajax submit   return false   gt       lt b gt First Name  lt  b gt   lt input type  text  name  firstname  id  firstname  gt       lt br gt       lt b gt Last Name  lt  b gt   lt input type  text  name  lastname  id  lastname  gt       lt br gt       lt input type  submit  name  send  onclick  ajax submit     gt   lt  form gt    In Js codes   function ajax submit           ajax           url   submit php           type   POST           data                firstname      firstname   val                lastname      lastname   val                      dataType   JSON           success  function  jsonStr                   another codes when result is success

User · Answer

Try this   var form   document formname   if   form  length  gt  0          form  keypress function  e           code   e keyCode   e keyCode   e which          if code toString      13                          formsubmit

User · Answer

I found out today the keypress event is not fired when hitting the Enter key  so you might want to switch to keydown   or keyup   instead   My test script               module input   keydown function  e                var keyCode   e which              console log  keydown    keyCode                  if  keyCode    13                    console log  enter                    return false                                        module input   keyup function  e                var keyCode   e which              console log  keyup    keyCode                  if  keyCode    13                    console log  enter                    return false                                        module input   keypress function  e                var keyCode   e which              console log  keypress    keyCode                   if  keyCode    13                    console log  Enter                    return false                              The output in the console when typing  A Enter B  on the keyboard   keydown  65  keypress  97  keyup  65   keydown  13  enter keyup  13  enter  keydown  66  keypress  98  keyup  66    You see in the second sequence the  keypress  is missing  but keydown and keyup register code  13  as being pressed released  As per jQuery documentation on the function keypress     Note  as the keypress event isn t covered by any official specification  the actual behavior encountered when using it may differ across browsers  browser versions  and platforms    Tested on IE11 and FF61 on Server 2012 R2

User · Answer

Also to maintain accessibility  you should use this to determine your keycode   c   e which   e which   e keyCode   if  c    13

[javascript] Submitting a form on 'Enter' with jQuery?

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to webkit

Examples related to forms