Making Enter key on an HTML form submit instead of activating button

Question

I have an HTML form with a single submit input  but also various button elements  When the user presses the  enter  key  I d expect it to actually submit the form  but instead  within Chrome 15 at least  I m finding that it s triggering the first button  since that occurs earlier in the HTML than the submit input  I guess    I know that in general you can t force browsers to favour a particular submit input  but I really thought they would favour submit inputs over button elements  Is there a small tweak I can make to the HTML to make this work  or am I going to have to embrace some kind of Javascript approach   Here s a rough mockup of the HTML    lt form action  form php  method  POST  gt       lt input type  text  name  field1   gt       lt button onclick  return myFunc1    gt Button 1 lt  button gt       lt input type  submit  name  go  value  Submit   gt   lt  form gt

User · Accepted Answer

You don t need JavaScript to choose your default submit button or input  You just need to mark it up with type  submit   and the other buttons mark them with type  button   In your example    lt button type  button  onclick  return myFunc1    gt Button 1 lt  button gt   lt input type  submit  name  go  value  Submit   gt

User · Answer

Try this  if enter key was pressed you can capture it like this for example  I developed an answer the other day html button specify selected  see if this helps   Specify the forms name as for example yourFormName then you should be able to submit the form without having focus on the form   document onkeypress   keyPress   function keyPress e     var x   e    window event    var key    x keyCode    x which     if key    13    key    3          myFunc1       document yourFormName submit

User · Answer

You can use jQuery       function            form input   keypress function  e            if   e which  amp  amp  e which    13      e keyCode  amp  amp  e keyCode    13                    button type submit   default   click                return false            else               return true

User · Answer

I just hit a problem with this  Mine was a fall off from changing the input to a button and I d had a badly written   gt  tag terminator   So I had    lt button name  submit login  type  submit  class  login    gt Login lt  button gt    And have just amended it to    lt button name  submit login  type  submit  class  login  gt Login lt  button gt    Now works like a charm  always the annoying small things    HTH

User · Answer

form submit input   on  keypress  function event      event preventDefault      if  event which     13           button submit   trigger  click

User · Answer

I just gave this a whirl in both Chrome and Firefox and IE10   As mentioned above - make sure that you have marked up with type    button    reset    submit  etc to ensure that it correctly cascades and chooses the correct button   Perhaps also setting all of them to have the same form  ie all  as that worked for me

User · Answer

Given there is only one  or with this solution potentially not even one  submit button  here is jQuery based solution that will work for multiple forms on the same page      lt script type  text javascript  gt        document  ready function               var makeAllFormSubmitOnEnter   function                     form input  form select   live  keypress   function  e                    if  e which  amp  amp  e which    13                          this  parents  form   submit                        return false                    else                       return true                                                        makeAllFormSubmitOnEnter             lt  script gt

[jquery] Making Enter key on an HTML form submit instead of activating button

Examples related to jquery

Examples related to html

Examples related to forms