How is the default submit button on an HTML form determined

Question

If a form is submitted but not by any specific button  such as   by pressing Enter using HTMLFormElement submit   in JS   how is a browser supposed to determine which of multiple submit buttons  if any  to use as the one pressed   This is significant on two levels    calling an onclick event handler attached to a submit button the data sent back to the web server   My experiments so far have shown that    when pressing Enter  Firefox  Opera and Safari use the first submit button in the form when pressing Enter  IE uses either the first submit button or none at all depending on conditions I haven t been able to figure out all these browsers use none at all for a JS submit   What does the standard say   If it would help  here s my test code  the PHP is relevant only to my method of testing  not to my question itself    lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Strict  EN                         http   www w3 org TR xhtml1 DTD xhtml1-strict dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  xml lang  en  lang  en  gt   lt head gt   lt meta http-equiv  Content-Type  content  text html  charset utf-8    gt   lt title gt Test lt  title gt   lt  head gt    lt body gt    lt h1 gt Get lt  h1 gt   lt dl gt   lt  php foreach    GET as  k   gt   v  echo   lt dt gt  k lt  dt gt  lt dd gt  v lt  dd gt      gt   lt  dl gt    lt h1 gt Post lt  h1 gt   lt dl gt   lt  php foreach    POST as  k   gt   v  echo   lt dt gt  k lt  dt gt  lt dd gt  v lt  dd gt      gt   lt  dl gt    lt form name  theForm  method   lt  php echo isset   GET  method        GET  method      get     gt   action   lt  php echo   SERVER  SCRIPT NAME      gt   gt       lt input type  text  name  method    gt       lt input type  submit  name  action  value  Button 1  onclick  alert  Button 1    return true    gt       lt input type  text  name  stuff    gt       lt input type  submit  name  action  value  Button 2  onclick  alert  Button 2    return true    gt       lt input type  button  value  submit  onclick  document theForm submit       gt   lt  form gt    lt  body gt  lt  html gt

User · Answer

From your comments      A consequence is that  if you have   multiple forms submitting to the same   script  you can t rely on submit   buttons to distinguish them    I drop an  lt input type  hidden  value  form name    gt  into each form   If submitting with javascript  add submit events to forms  not click events to their buttons   Saavy users don t touch their mouse very often

User · Answer

HTML 4 does not make it explicit  The current HTML5 working draft specifies that the first submit button must be the default      A form element s default button is the     first submit button in     tree order whose form owner is that     form element       If the user agent supports letting the user submit a form     implicitly  for example  on some platforms hitting the  enter  key     while a text field is focused implicitly submits the form   then     doing so for a form whose default button has a defined     activation behavior must cause the user agent to     run synthetic click activation steps on that     default button

User · Answer

When you have multiple submit buttons in a single form and a user presses the ENTER key to submit the form from a text field  this code overrides default functionality  by calling the submit event on the form from the key press event   Here is that code      form input   keypress function e        if   e which  amp  amp  e which    13      e keyCode  amp  amp  e keyCode    13      e target  closest  form   submit    return false        else return true

User · Answer

If you submit the form via Javascript  i e  formElement submit   or anything equivalent   then none of the submit buttons are considered successful and none of their values are included in the submitted data    Note that if you submit the form by using submitElement click   then the submit that you had a reference to is considered active  this doesn t really fall under the remit of your question since here the submit button is unambiguous but I thought I d include it for people who read the first part and wonder how to make a submit button successful via JS form submission   Of course  the form s onsubmit handlers will still fire this way whereas they wouldn t via form submit   so that s another kettle of fish      If the form is submitted by hitting Enter while in a non-textarea field  then it s actually down to the user agent to decide what it wants here   The specs don t say anything about submitting a form using the enter key while in a text entry field  if you tab to a button and activate it using space or whatever  then there s no problem as that specific submit button is unambiguously used    All it says is that a form must be submitted when a submit button is activated  it s not even a requirement that hitting enter in e g  a text input will submit the form   I believe that Internet Explorer chooses the submit button that appears first in the source  I have a feeling that Firefox and Opera choose the button with the lowest tabindex  falling back to the first defined if nothing else is defined   There s also some complications regarding whether the submits have a non-default value attribute IIRC   The point to take away is that there is no defined standard for what happens here and it s entirely at the whim of the browser - so as far as possible in whatever you re doing  try to avoid relying on any particular behaviour   If you really must know  you can probably find out the behaviour of the various browser versions but when I investigated this a while back there were some quite convoluted conditions  which of course are subject to change with new browser versions  and I d advise you to avoid it if possible

User · Answer

my recipe    lt form gt   lt input type hidden name action value login gt  lt  -- the magic  -- gt    lt input type text name email gt   lt input type text name password gt    lt input type submit name action value login gt   lt input type submit name action value  forgot password  gt   lt  form gt    It will send the default hidden field if none of the buttons are  clicked    if they are clicked  they have preference and it s value is passed

User · Answer

Andrezj s pretty much got it nailed    but here s an easy cross-browser solution   Take a form like this     lt form gt       lt input  gt       lt button type  submit  value  some non-default action   gt       lt button type  submit  value  another non-default action   gt       lt button type  submit  value  yet another non-default action   gt        lt button type  submit  value  default action   gt   lt  form gt    and refactor to this     lt form gt       lt input  gt        lt button style  overflow  visible  important  height  0  important  width  0  important  margin  0  important  border  0  important  padding  0  important  display  block  important   type  submit  value  default action   gt        lt button type  submit  value  some non-default action   gt       lt button type  submit  value  another non-default action   gt       lt button type  submit  value  yet another non-default action   gt       lt button type  submit  value  still another non-default action   gt        lt button type  submit  value  default action   gt   lt  form gt    Since the W3C spec indicates multiple submit buttons are valid  but omits guidance as to how the user-agent should handle them  the browser manufacturers are left to implement as they see fit  I ve found they ll either submit the first submit button in the form  or submit the next submit button after the form field that currently has focus   Unfortunately  simply adding a style of display  none  won t work because the W3C spec indicates any hidden element should be excluded from user interactions  So hide it in plain sight instead   Above is an example of the solution I ended up putting into production  Hitting the enter key triggers the default form submission is behavior as expected  even when other non-default values are present and precede the default submit button in the DOM  Bonus for mouse keyboard interaction with explicit user inputs while avoiding javascript handlers   Note  tabbing through the form will not display focus for any visual element yet will still cause the invisible button to be selected  To avoid this issue  simply set tabindex attributes accordingly and omit a tabindex attribute on the invisible submit button   While it may seem out of place to promote these styles to  important  they should prevent any framework or existing button styles from interfering with this fix  Also  those inline styles are definitely poor form  but we re proving concepts here    not writing production code

User · Answer

I struggled with the same question since i had submit button in the middle of the from which redirected submit to another page  like so    lt button type  submit  onclick  this form action     another page   gt More lt  button gt    When user pressed enter key  this button was clicked instead of another submit button   So i did some primitive tests by creating a from with multiple submit buttons and different visibility options and onclick event alerting which button was clicked  https   jsfiddle net aqfy51om 1   Browsers and OS es i used for testing   WINDOWS   Google Chrome 43  c mon google  D  Mozilla Firefox 38 Internet Explorer 11 Opera 30 0   OSX   Google Chrome 43 Safari 7 1 6   Most of these browsers clicked very first button despite the visibility options applied exept IE and Safari which clicked the third button  which is  visible  inside  hidden  container    lt div style  width  0  height  0  overflow  hidden   gt       lt button type  submit  class  btn btn-default  onclick  alert  Hidden submit button  3 was clicked     gt Hidden submit button  3 lt  button gt   lt  div gt    So my suggestion  which i m going to use myself  is   If you form has multiple submit buttons with different meaning  then include submit button with default action at the beginning of the form which is either    Fully visible Wrapped in a container with style  width  0  height  0  overflow  hidden     EDIT Another option might be to offset the button still at the beginning of the from  style  position  absolute  left  -9999px  top  -9999px    just tried it in IE - worked   but i have no idea what else it can screw up  for example printing

User · Answer

I had a form with 11 submit buttons on it  and it would always use the first submit button when the user pressed enter  I read elsewhere that it is not a good idea  bad practice  to have more than one submit button on a form  and the best way to do this is have the button you want as default  as the only submit button on the form  The other buttons should be made into  TYPE BUTTON  and an onClick event added that calls your own submit routine in Javascript  Something like this  -   lt SCRIPT Language  JavaScript  gt  function validform          do whatever you need to validate the form  and return true or false accordingly    function mjsubmit       if  validform      document form1 submit    return true     return false     lt  SCRIPT gt   lt INPUT TYPE BUTTON NAME  button1  VALUE  button1  onClick  document form1 submitvalue  button1   return mjsubmit     gt   lt INPUT TYPE BUTTON NAME  button2  VALUE  button2  onClick  document form1 submitvalue  button2   return mjsubmit     gt   lt INPUT TYPE SUBMIT NAME  button3  VALUE  button3  onClick  document form1 submitvalue  button3   return validform     gt   lt INPUT TYPE BUTTON NAME  button4  VALUE  button4  onClick  document form1 submitvalue  button4   return mjsubmit     gt    Here  button3 is the default  and although you are programmatically submitting the form with the other buttons  the mjsubmit routine validates them  HTH

User · Answer

Another solution I ve used is to just have one button in the form  and fake the other buttons   Here s an example    lt form gt     lt label for  amount  gt Amount of items lt  label gt     lt input id  amount  type  text  name  amount    gt     lt span id  checkStock  class  buttonish  gt Check stock lt  span gt     lt button type  submit  name  action  value  order  gt Place order lt  button gt   lt  form gt    I then style the span elements to look like a button  A JS listener observes the span and performs the desired operation once clicked   Not necessarily right for all situations  but at least it s pretty easy to do

User · Answer

EDIT  Sorry  when writing this answer I was thinking about submit buttons in the general sense  The answer below is not about multiple type  submit  buttons  as it leaves only one type  submit  and change the other to type  button   I leave the answer here as reference in case helps someone that can change the type in their form   To determine what button is pressed when hitting enter  you can mark it up with type  submit   and the other buttons mark them with type  button   For example    lt input type  button  value  Cancel    gt   lt input type  submit  value  Submit    gt

User · Answer

Strange that the first button Enter goes always to the first button regardless is visible or not  e g  using jquery show hide    Adding attribute  attr  disabled    disabled   prevent receiving Enter submit button completely  It s problem for example when adjusting Insert Edit Delete button visibility in record dialogs  I found less hackish and simple placing Edit in front of Insert   lt button type  submit  name  action  value  update  gt Update lt  button gt   lt button type  submit  name  action  value  insert  gt Insert lt  button gt   lt button type  submit  name  action  value  delete  gt Delete lt  button gt    and use javascript code       formId button type  submit   name  action   value   insert     hide   attr  disabled    disabled        formId button type  submit   name  action   value  insert     show   removeAttr  disabled

User · Answer

This can now be solved using flexbox   HTML   lt form gt       lt h1 gt My Form lt  h1 gt       lt label for  text  gt Input  lt  label gt       lt input type  text  name  text  id  text   gt        lt  -- Put the elements in reverse order -- gt       lt div class  form-actions  gt           lt button gt Ok lt  button gt   lt  -- our default action is first -- gt           lt button gt Cancel lt  button gt       lt  div gt   lt  form gt    CSS   form-actions       display  flex      flex-direction  row-reverse     reverse the elements inside        Explaination Using flex box  we can reverse the order of the elements in a container that uses display  flex by also using the CSS rule  flex-direction  row-reverse  This requires no CSS or hidden elements  For older browsers that do not support flexbox  they still get a workable solution but the elements will not be reversed   Demo http   codepen io Godwin pen rLVKjm

User · Answer

From the HTML 4 spec      If a form contains more than one submit button  only the activated   submit button is successful    This means that given more than 1 submit button and none activated  clicked   none should be successful   And I d argue this makes sense  Imagine a huge form with multiple submit-buttons  At the top  there is a  delete this record -button  then lots of inputs follow and at the bottom there is an  update this record -button  A user hitting enter while in a field at the bottom of the form would never suspect that he implicitly hits the  delete this record  from the top   Therefore I think it is not a good idea to use the first or any other button it the user does not define  click  one  Nevertheless  browsers are doing it of course

User · Answer

lt form onsubmit  quot alert  submit   return false  quot  gt       lt input name  quot username quot  gt       lt input name  quot password quot  type  quot password quot  gt       lt button onclick  quot if document activeElement     this  alert  button 1    else default submit click    return false  quot  gt button 1 lt  button gt       lt button onclick  quot if document activeElement     this  alert  button 2    else default submit click    return false  quot  gt button 2 lt  button gt       lt input id  quot default submit quot  type  quot submit quot  gt   lt  form gt   if you press enter from text input  then the button will not focused  then we ignore this click and click the default submit instead  but if you click the button by mouse  it will be focused  then we apply this click

User · Answer

I think this post would help if someone wants to do it with jQuery   http   greatwebguy com programming dom default-html-button-submit-on-enter-with-jquery   The basic solution is     function            form input   keypress function  e        if   e which  amp  amp  e which    13      e keyCode  amp  amp  e keyCode    13                input type submit  default   click            return false        else           return true                      and another I liked was   jQuery document  ready function        form input  form select   live  keypress   function  e    if    this  parents  form   find  button type submit  default  input type submit  default   length  lt   0  return true   if   e which  amp  amp  e which    13      e keyCode  amp  amp  e keyCode    13       this  parents  form   find  button type submit  default  input type submit  default   click    return false    else   return true

[javascript] How is the default submit button on an HTML form determined?

Examples related to javascript

Examples related to html

Examples related to cross-browser

Examples related to standards