Multiple submit buttons in an HTML form

Question

Let s say you create a wizard in an HTML form  One button goes back  and one goes forward  Since the back button appears first in the markup when you press Enter  it will use that button to submit the form   Example    x000D   x000D   lt form gt  x000D     lt  -- Put your cursor in this field and press Enter -- gt  x000D     lt input type  text  name  field1    gt  x000D   x000D     lt  -- This is the button that will submit -- gt  x000D     lt input type  submit  name  prev  value  Previous Page    gt  x000D   x000D     lt  -- But this is the button that I WANT to submit -- gt  x000D     lt input type  submit  name  next  value  Next Page    gt  x000D   lt  form gt  x000D   x000D   x000D    I would like to get to decide which button is used to submit the form when a user presses Enter  That way  when you press Enter the wizard will move to the next page  not the previous  Do you have to use tabindex to do this

User · Answer

This works without JavaScript or CSS in most browsers:

<form>
    <p><input type="text" name="field1" /></p>
    <p><a href="previous.html">
    <button type="button">Previous Page</button></a>
    <button type="submit">Next Page</button></p>
</form>

Firefox, Opera, Safari, and Google Chrome all work.
As always, Internet Explorer is the problem.

This version works when JavaScript is turned on:

<form>
    <p><input type="text" name="field1" /></p>
    <p><a href="previous.html">
    <button type="button" onclick="window.location='previous.html'">Previous Page</button></a>
    <button type="submit">Next Page</button></p>
</form>

So the flaw in this solution is:

Previous Page does not work if you use Internet Explorer with JavaScript off.

Mind you, the back button still works!

User · Answer

You can do it with CSS   Put the buttons in the markup with the Next button first  then the Prev button afterwards   Then use CSS to position them to appear the way you want

User · Answer

The first time I came up against this  I came up with an onclick   JavaScript hack when choices are not prev next   that I still like for its simplicity  It goes like this    model myApp Models myModel   lt script type  text javascript  gt      function doOperation op            document getElementById  OperationId   innerText   op             you could also use Ajax to reference the element         lt  script gt    lt form gt     lt input type  text  id    TextFieldId  name  TextField  value      gt     lt input type  hidden  id  OperationId  name  Operation  value      gt     lt input type  submit  name  write  value  Write  onclick  doOperation  Write     gt     lt input type  submit  name  read  value  Read  onclick  doOperation  Read     gt   lt  form gt    When either submit button is clicked  it stores the desired operation in a hidden field  which is a string field included in the model the form is associated with  and submits the form to the Controller  which does all the deciding  In the Controller  you simply write      Do operation according to which submit button was clicked    based on the contents of the hidden Operation field  if  myModel Operation     Read             Do read logic   else if  myModel Operation     Write             Do write logic   else           Do error logic     You can also tighten this up slightly using numeric operation codes to avoid the string parsing  but unless you play with enumerations  the code is less readable  modifiable  and self-documenting and the parsing is trivial  anyway

User · Answer

You can use Tabindex to solve this issue  Also changing the order of the buttons would be a more efficient way to achieve this   Change the order of the buttons and add float values to assign them the desired position you want to show in your HTML view

User · Answer

I would use JavaScript to submit the form  The function would be triggered by the OnKeyPress event of the form element and would detect whether the Enter key was selected  If this is the case  it will submit the form   Here are two pages that give techniques on how to do this  1  2  Based on these  here is an example of usage  based on here     lt SCRIPT TYPE  text javascript  gt    lt  -- function submitenter myfield e      var keycode    if  window event        keycode   window event keyCode      else if  e        keycode   e which      else       return true         if  keycode    13        myfield form submit        return false      else       return true          -- gt  lt  SCRIPT gt    lt INPUT NAME  MyText  TYPE  Text  onKeyPress  return submitenter this event     gt

User · Answer

I think this is a esay solution for this  Make Previous button type to button  and a new add onclick attribute in button with value jQuery this  attr  type   submit     So  when the user clicks on the Previous button then its type will be changed to submit and the form will be submitted with Previous button   lt form gt     lt  -- Put your cursor in this field and press Enter -- gt     lt input type  quot text quot  name  quot field1 quot    gt      lt  -- This is the button that will submit -- gt     lt input type  quot button quot  onclick  quot jQuery this  attr  type   submit    quot  name  quot prev quot  value  quot Previous Page quot    gt      lt  -- But this is the button that I WANT to submit -- gt     lt input type  quot submit quot  name  quot next quot  value  quot Next Page quot    gt   lt  form gt

User · Answer

Another simple option would be to put the back button after the submit button in the HTML code  but float it to the left  so it appears on the page before the submit button   Changing the tab order should be all it takes to accomplish this  Keep it simple

User · Answer

Sometimes the provided solution by  palotasb is not sufficient  There are use cases where for example a  Filter  submits button is placed above buttons like  Next and Previous   I found a workaround for this  copy the submit button which needs to act as the default submit button in a hidden div and place it inside the form above any other submit button   Technically it will be submitted by a different button when pressing Enter than when clicking on the visible Next button  But since the name and value are the same  there s no difference in the result    lt html gt   lt head gt       lt style gt          div defaultsubmitbutton               display  none                 lt  style gt   lt  head gt   lt body gt       lt form action  action  method  get  gt           lt div class  defaultsubmitbutton  gt               lt input type  submit  name  next  value  Next  gt           lt  div gt           lt p gt  lt input type  text  name  filter  gt  lt input type  submit  value  Filter  gt  lt  p gt           lt p gt Filtered results lt  p gt           lt input type  radio  name  choice  value  1  gt Filtered result 1          lt input type  radio  name  choice  value  2  gt Filtered result 2          lt input type  radio  name  choice  value  3  gt Filtered result 3          lt div gt                               lt input type  submit  name  prev  value  Prev  gt               lt input type  submit  name  next  value  Next  gt           lt  div gt       lt  form gt   lt  body gt   lt  html gt

User · Answer

This is what I have tried out    You need to make sure you give your buttons different names Write an if statement that will do the required action if either button is clicked     nbsp    lt form gt       lt input type  text  name  field1    gt   lt  -- Put your cursor in this field and press Enter -- gt        lt input type  submit  name  prev  value  Previous Page    gt   lt  -- This is the button that will submit -- gt       lt input type  submit  name  next  value  Next Page    gt   lt  -- But this is the button that I WANT to submit -- gt   lt  form gt    In PHP   if isset   POST  prev           header  Location  previous html        die       if isset   POST  next           header  Location  next html        die

User · Answer

With JavaScript  here jQuery   you can disable the prev button before submitting the form      form   on  keypress   function event        if  event which    13               input name  prev     prop  type    button

User · Answer

Using the example you gave    lt form gt       lt input type  text  name  field1    gt  lt  -- Put your cursor in this field and press Enter -- gt       lt input type  submit  name  prev  value  Previous Page    gt   lt  -- This is the button that will submit -- gt       lt input type  submit  name  next  value  Next Page    gt   lt  -- But this is the button that I WANT to submit -- gt   lt  form gt    If you click on  Previous Page   only the value of  prev  will be submitted  If you click on  Next Page  only the value of  next  will be submitted   If however  you press Enter somewhere on the form  neither  prev  nor  next  will be submitted   So using pseudocode you could do the following   If  prev  submitted then     Previous Page was click Else If  next  submitted then     Next Page was click Else     No button was click

User · Answer

I came across this question when trying to find an answer to basically the same thing  only with ASP NET  controls  when I figured out that the ASP button has a property called UseSubmitBehavior that allows you to set which one does the submitting    lt asp Button runat  server  ID  SumbitButton  UseSubmitBehavior  False  Text  Submit    gt    Just in case someone is looking for the ASP NET button way to do it

User · Answer

Give your submit buttons the same name like this    lt input type  submit  name  submitButton  value  Previous Page    gt   lt input type  submit  name  submitButton  value  Next Page    gt    When the user presses Enter and the request goes to the server  you can check the value for submitButton on your server-side code which contains a collection of form name value pairs  For example  in ASP Classic   If Request Form  submitButton      Previous Page  Then       Code for the previous page ElseIf Request Form  submitButton      Next Page  Then       Code for the next page End If   Reference  Using multiple submit buttons on a single form

User · Answer

When a button is clicked with a mouse  and hopefully by touch   it records the X Y coordinates  This is not the case when it is invoked by a form  these values are normally zero  So you can do something like this  function e      const isArtificial   e screenX     0  amp  amp  e screenY     0      amp  amp  e x     0  amp  amp  e y     0       amp  amp  e clientX     0  amp  amp  e clientY     0       if  isArtificial          return     DO NOTHING       else            OPTIONAL  Don t submit the form when clicked           e preventDefault             e stopPropagation                     Natural code goes here

User · Answer

This cannot be done with pure HTML  You must rely on JavaScript for this trick   However  if you place two forms on the HTML page you can do this   Form1 would have the previous button   Form2 would have any user inputs   the next button   When the user presses Enter in Form2  the Next submit button would fire

User · Answer

I hope this helps  I m just doing the trick of floating the buttons to the right   This way the Prev button is left of the Next button  but the Next comes first in the HTML structure    x000D   x000D   f   x000D    float  right  x000D    x000D   clr   x000D    clear  both  x000D    x000D   lt form action  action  method  get  gt  x000D     lt input type  text  name  abc  gt  x000D     lt div id  buttons  gt  x000D       lt input type  submit  class  f  name  next  value  Next  gt  x000D       lt input type  submit  class  f  name  prev  value  Prev  gt  x000D       lt div class  clr  gt  lt  div gt  lt  -- This div prevents later elements from floating with the buttons  Keeps them  inside  div buttons -- gt  x000D     lt  div gt  x000D   lt  form gt  x000D   x000D   x000D    Benefits over other suggestions  no JavaScript code  accessible  and both buttons remain type  submit

User · Answer

Instead of struggling with multiple submits  JavaScript or anything like that to do some previous next stuff  an alternative would be to use a carousel to simulate the different pages  Doing this    You don t need multiple buttons  inputs or submits to do the previous next thing  you have only one input type  quot submit quot  in only one form  The values in the whole form are there until the form is submitted  The user can go to any previous page and any next page flawlessly to modify the values   Example using Bootstrap 5 0 0    lt div id  quot carousel quot  class  quot carousel slide quot  data-ride  quot carousel quot  gt       lt form action  quot index php quot  method  quot post quot  class  quot carousel-inner quot  gt           lt div class  quot carousel-item active quot  gt               lt input type  quot text quot  name  quot lastname quot  placeholder  quot Lastname quot   gt           lt  div gt           lt div class  quot carousel-item quot  gt               lt input type  quot text quot  name  quot firstname quot  placeholder  quot Firstname quot   gt           lt  div gt           lt div class  quot carousel-item quot  gt               lt input type  quot submit quot  name  quot submit quot  value  quot Submit quot   gt           lt  div gt       lt  form gt       lt a class  quot btn-secondary quot  href  quot  carousel quot  role  quot button quot  data-slide  quot prev quot  gt Previous page lt  a gt       lt a class  quot btn-primary quot  href  quot  carousel quot  role  quot button quot  data-slide  quot next quot  gt Next page lt  a gt   lt  div gt

User · Answer

If the fact that the first button is used by default is consistent across browsers  put them the right way around in the source code  and then use CSS to switch their apparent positions   float them left and right to switch them around visually  for example

User · Answer

If you have multiple active buttons on one page then you can do something like this   Mark the first button you want to trigger on the Enter keypress as the default button on the form  For the second button  associate it to the Backspace button on the keyboard  The Backspace eventcode is 8    x000D   x000D    document  on  keydown   function event    x000D    if  event which toString       8     x000D      var findActiveElementsClosestForm     document activeElement  closest  form    x000D   x000D      if  findActiveElementsClosestForm  amp  amp  findActiveElementsClosestForm length    x000D           form     findActiveElementsClosestForm 0  id      secondary button   trigger  click    x000D        x000D      x000D      x000D   lt script src  https   ajax aspnetcdn com ajax jQuery jquery-3 2 1 min js  gt  lt  script gt  x000D   x000D   lt form action  action  method  get  defaultbutton  TriggerOnEnter  gt  x000D     lt input type  submit  id  PreviousButton  name  prev  value  Prev  class  secondary button    gt  x000D     lt input type  submit  id  TriggerOnEnter  name  next  value  Next  class  primary button    gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

lt input type  quot submit quot  name  quot prev quot  value  quot Previous Page quot  gt    lt input type  quot submit quot  name  quot prev quot  value  quot Next Page quot  gt    Keep the name of all submit buttons the same   quot prev quot   The only difference is the value attribute with unique values  When we create the script  these unique values will help us to figure out which of the submit buttons was pressed  And write the following coding      btnID    quot  quot  if Request Form  quot prev quot      quot Previous Page quot  then     btnID    quot 1 quot  else if Request Form  quot prev quot      quot Next Page quot  then     btnID    quot 2 quot  end if

User · Answer

Try this      x000D   x000D   lt form gt  x000D     lt input type  text  name  Name    gt  x000D     lt  -- Enter the value -- gt  x000D   x000D     lt input type  button  name  prev  value  Previous Page    gt  x000D     lt  -- This is the button that will submit -- gt  x000D     lt input type  submit  name  next  value  Next Page    gt  x000D     lt  -- But this is the button that I WANT to submit -- gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

Change the previous button type into a button like this      lt input type  button  name  prev  value  Previous Page    gt    Now the Next button would be the default  plus you could also add the default attribute to it so that your browser will highlight it like so    lt input type  submit  name  next  value  Next Page  default   gt

User · Answer

Changing the tab order should be all it takes to accomplish this  Keep it simple    Another simple option would be to put the back button after the submit button in the HTML code but float it to the left so it appears on the page before the submit button

User · Answer

If you really just want it to work like an install dialog  just give focus to the  Next  button OnLoad     That way if the user hits Return  the form submits and goes forward  If they want to go back they can hit Tab or click on the button

User · Answer

From https   html spec whatwg org multipage forms html implicit-submission     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       Having the next input be type  submit  and changing the previous input to type  button  should give the desired default behavior    lt form gt      lt input type  text  name  field1    gt   lt  -- put your cursor in this field and press Enter -- gt       lt input type  button  name  prev  value  Previous Page    gt   lt  -- This is the button that will submit -- gt      lt input type  submit  name  next  value  Next Page    gt   lt  -- But this is the button that I WANT to submit -- gt   lt  form gt

User · Answer

I solved a very similar problem in this way    If JavaScript is enabled  in most cases nowadays  then all the submit buttons are  degraded  to buttons at page load via JavaScript  jQuery   Click events on the  degraded  button typed buttons are also handled via JavaScript  If JavaScript is not enabled then the form is served to the browser with multiple submit buttons  In this case hitting Enter on a textfield within the form will submit the form with the first button instead of the intended default  but at least the form is still usable  you can submit with both the prev and next buttons    Working example    x000D   x000D   lt html gt  x000D       lt head gt  x000D           lt script src  https   ajax googleapis com ajax libs jquery 1 12 4 jquery min js  gt  lt  script gt  x000D       lt  head gt  x000D   x000D       lt body gt  x000D           lt form action  http   httpbin org post  method  post  gt  x000D              If JavaScript  is disabled  then you CAN submit the form x000D              with button1  button2 or button3  x000D   x000D              If you press enter on a text field  then the form is x000D              submitted with the first submit button  x000D   x000D              If JavaScript is enabled  then the submit typed buttons x000D              without the  defaultSubmitButton  style are converted x000D              to button typed buttons  x000D   x000D              If you press Enter on a text field  then the form is x000D              submitted with the only submit button x000D               the one with class defaultSubmitButton  x000D   x000D              If you click on any other button in the form  then the x000D              form is submitted with that button s value  x000D   x000D               lt br   gt  x000D   x000D               lt input type  text  name  text1   gt  lt  input gt  x000D               lt button type  submit  name  action  value  button1   gt button 1 lt  button gt  x000D               lt br   gt  x000D   x000D               lt input type  text  name  text2   gt  lt  input gt  x000D               lt button type  submit  name  action  value  button2   gt button 2 lt  button gt  x000D               lt br   gt  x000D   x000D               lt input type  text  name  text3   gt  lt  input gt  x000D               lt button class  defaultSubmitButton  type  submit  name  action  value  button3   gt default button lt  button gt  x000D           lt  form gt  x000D   x000D           lt script gt  x000D                document  ready function    x000D   x000D                     Change submit typed buttons without the  defaultSubmitButton  x000D                     style to button typed buttons    x000D                     form button type submit    not   defaultSubmitButton   each function    x000D                        this  attr  type    button    x000D                      x000D   x000D                     Clicking on button typed buttons results in  x000D                     1  Setting the form s submit button s value to x000D                        the clicked button s value  x000D                     2  Clicking on the form s submit button    x000D                     form button type button    click function  event    x000D                      var form   event target closest  form    x000D                      var submit      button type  submit    form  first    x000D                      submit val event target value   x000D                      submit click    x000D                      x000D                  x000D           lt  script gt  x000D       lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

[html] Multiple submit buttons in an HTML form

Examples related to html

Examples related to forms

Examples related to form-submit

Examples related to submit-button