Multiple submit buttons on HTML form designate one button as default

Question

I have a form that has three submit buttons as follows    lt input type  submit  name  COMMAND  value   amp lsaquo  Prev  gt   lt input type  submit  name  COMMAND  value  Save  gt   lt input type  reset   name  NOTHING  value  Reset  gt   lt input type  submit  name  COMMAND  value  Next  amp rsaquo   gt   lt input type  button  name  NOTHING  value  Skip  amp rsaquo   onclick  location    yada-yada asp    gt    The row of buttons is a mix of submit  reset and JavaScript buttons  The order of buttons is subject to change  but in any case the save button remains between prev and next buttons   The problem here is that when a user hits Enter to submit the form  the post variable  COMMAND  contains  Prev   normal  as this is the first submit button on the form  I however want the  Next  button to be triggered when the user submits the form via the Enter button  It is kind of like setting it as the default submit button  even though there are other buttons before it

User · Answer

The first button is always the default  it can t be changed  Whilst you can try to fix it up with JavaScript  the form will behave unexpectedly in a browser without scripting  and there are some usability accessibility corner cases to think about  For example  the code linked to by Zoran will accidentally submit the form on Enter press in a  lt input type  button  gt   which wouldn t normally happen  and won t catch IE s behaviour of submitting the form for Enter press on other non-field content in the form  So if you click on some text in a  lt p gt  in the form with that script and press Enter  the wrong button will be submitted    especially dangerous if  as given in that example  the real default button is    Delete      My advice would be to forget about using scripting hacks to reassign defaultness  Go with the flow of the browser and just put the default button first  If you can t hack the layout to give you the on-screen order you want  then you can do it by having a dummy invisible button first in the source  with the same name value as the button you want to be default    lt input type  submit  class  defaultsink  name  COMMAND  value  Save    gt    defaultsink       position  absolute  left  -100        note  positioning is used to push the button off-screen because display  none and visibility  hidden have browser-variable side-effects on whether the button is taken as default and whether it s submitted

User · Answer

bobince s solution has the downside of creating a button which can be Tab-d over  but otherwise unusable  This can create confusion for keyboard users   A different solution is to use the little-known form attribute    lt form gt       lt input name  data  value  Form data here  gt       lt input type  submit  name  do-secondary-action  form  form2  value  Do secondary action  gt       lt input type  submit  name  submit  value  Submit  gt   lt  form gt    lt form id  form2  gt  lt  form gt    This is standard HTML  however unfortunately not supported in Internet Explorer

User · Answer

I m resurrecting this because I was researching a non-JavaScript way to do this  I wasn t into the key handlers  and the CSS positioning stuff was causing tab ordering to break since CSS repositioning doesn t change tab order    My solution is based on the response at https   stackoverflow com a 9491141    The solution source is below  tabindex is used to correct tab behaviour of the hidden button  as well as aria-hidden to avoid having the button read out by screen readers   identified by assistive devices     lt form method  post  action    gt     lt button type  submit  name  useraction  value  2nd  class  default-button-handler  aria-hidden  true  tabindex  -1  gt  lt  button gt     lt div class  form-group  gt       lt label for  test-input  gt Focus into this input   lt  label gt       lt input type  text  id  test-input  class  form-control  name  test-input  placeholder  Focus in here and press enter   go    gt     lt  div gt    1st button in DOM   2nd button in DOM   3rd button in DOM    Essential CSS for this solution    default-button-handler     width  0    height  0    padding  0    border  0    margin  0

User · Answer

My suggestion is don t fight this behaviour  You can effectively alter the order using floats  For example    lt p id  buttons  gt   lt input type  submit  name  next  value  Next  gt   lt input type  submit  name  prev  value  Previous  gt   lt  p gt    with    buttons   overflow  hidden     buttons input   float  right      will effectively reverse the order and thus the  Next  button will be the value triggered by hitting enter   This kind of technique will cover many circumstances without having to resort to more hacky JavaScript methods

User · Answer

Quick n dirty you could create an hidden duplicate of the submit-button  which should be used  when pressing enter   Example CSS  input hidden       width  0px      height  0px      margin  0px      padding  0px      outline  none      border  0px      Example HTML   lt input type  submit  name  next  value  Next  class  hidden    gt   lt input type  submit  name  prev  value  Previous    gt   lt input type  submit  name  next  value  Next    gt    If someone now hits enter in your form  the  hidden  next-button will be used as submitter   Tested on IE9  Firefox  Chrome and Opera

User · Answer

If you re using jQuery  this solution from a comment made here is pretty slick     function           form   each function              var thisform     this           thisform prepend thisform find  button default   clone   css               position   absolute               left   -999px               top   -999px               height  0              width  0                            Just add class  default  to the button you want to be the default  It puts a hidden copy of that button right at the beginning of the form

User · Answer

Another solution  using jQuery     document  ready function          input   keypress function e        if  e which    13              submit   click          return false             return true              This should work on the following forms  making  Update  the default action    lt form name  f  method  post  action   action  gt     lt input type  text  name  text1    gt     lt input type  submit  name  button2  value  Delete    gt     lt input type  submit  name  button1  id  submit  value  Update    gt   lt  form gt    As well as    lt form name  f  method  post  action   action  gt     lt input type  text  name  text1    gt     lt button type  submit  name  button2  gt Delete lt  button gt     lt button type  submit  name  button1  id  submit  gt Update lt  button gt   lt  form gt    This traps the Enter key only when an input field on the form has focus

User · Answer

Set type submit to the button you d like to be default and type button to other buttons  Now in the form below you can hit Enter in any input fields  and the Render button will work  despite the fact it is the second button in the form     Example        lt button id  close button  class  btn btn-success              type button gt         lt span class  glyphicon glyphicon-edit  gt   lt  span gt  Edit program      lt  button gt       lt button id  render button  class  btn btn-primary              type submit gt               lt  --  Here we use SUBMIT  not BUTTON -- gt         lt span class  glyphicon glyphicon-send  gt   lt  span gt  Render      lt  button gt    Tested in FF24 and Chrome 35

User · Answer

You should not be using buttons of the same name   It s bad semantics   Instead  you should modify your backend to look for different name values being set    lt input type  submit  name  COMMAND PREV  value   amp lsaquo  Prev  gt   lt input type  submit  name  COMMAND SAVE  value  Save  gt   lt input type  reset   name  NOTHING  value  Reset  gt   lt input type  submit  name  COMMAND NEXT  value  Next  amp rsaquo   gt   lt input type  button  name  NOTHING  value  Skip  amp rsaquo   onclick  window location    yada-yada asp    gt    Since I don t know what language you are using on the backend  I ll give you some pseudocode   if  input name COMMAND PREV is set       else if  input name COMMAND SAVE is set       else if  input name COMMENT NEXT is set

[html] Multiple submit buttons on HTML form – designate one button as default

Examples related to html

Examples related to css

Examples related to forms

Examples related to submit-button