Form onSubmit determine which submit button was pressed

Question

I have a form with two submit buttons and some code   HTML    lt input type  submit  name  save  value  Save    gt   lt input type  submit  name  saveAndAdd  value  Save and add another    gt    JavaScript   form onSubmit   function evnt           Do some asyncrhnous stuff  that will later on submit the form     return false      Of course the two submit buttons accomplish different things  Is there a way to find out in onSubmit which button was pressed  so later I could submit by doing thatButton click     Ideally I would like to not modify the code for the buttons  just have a pure JavaScript addon that has this behavior   I know that Firefox has evnt explicitOriginalTarget  but I can t find anything for other browsers

User · Answer

Bare bones  but confirmed working  example    lt script type  text javascript  gt  var clicked  function mysubmit         alert clicked      lt  script gt   lt form action    onsubmit  mysubmit   return false  gt       lt input type  submit  onclick  clicked  Save   value  Save    gt       lt input type  submit  onclick  clicked  Add   value  Add    gt   lt  form gt

User · Answer

Not in the submit event handler itself  no   But what you can do is add click handlers to each submit which will inform the submit handler as to which was clicked   Here s a full example  using jQuery for brevity    lt html gt   lt head gt     lt title gt Test Page lt  title gt     lt script src  http   code jquery com jquery-latest js  gt  lt  script gt     lt script type  text javascript  gt     jQuery function            var submitActor   null        var  form       test          var  submitActors    form find  input type submit             form submit function event              if  null     submitActor                     If no actor is explicitly clicked  the browser will                  automatically choose the first in source-order                  so we do the same here               submitActor    submitActors 0                          console log submitActor name                alert submitActor name              return false                    submitActors click function event              submitActor   this                      lt  script gt   lt  head gt    lt body gt      lt form id  test  gt        lt input type  text    gt        lt input type  submit  name  save  value  Save    gt       lt input type  submit  name  saveAndAdd  value  Save and add another    gt      lt  form gt    lt  body gt   lt  html gt

User · Answer

Why not loop through the inputs and then add onclick handlers to each   You don t have to do this in HTML  but you can add a handler to each button like   button onclick   function    DoStuff this value   return false       return false  so that form does not submit   Then your function could  do stuff  according to whichever value you passed   function DoStuff val        if  val      Val 1                 Do some stuff              Do other stuff

User · Answer

OP stated he didn t want to modify the code for the buttons  This is the least-intrusive answer I could come up with using the other answers as a guide  It doesn t require additional hidden fields  allows you to leave the button code intact  sometimes you don t have access to what generates it   and gives you the info you were looking for from anywhere in your code   which button was used to submit the form  I haven t evaluated what happens if the user uses the Enter key to submit the form  rather than clicking    lt script language  javascript  type  text javascript  gt       var initiator             document  ready function                 submit   click function     initiator   this name               lt  script gt    Then you have access to the  initiator  variable anywhere that might need to do the checking  Hope this helps    Spanky

User · Answer

First Suggestion   Create a Javascript Variable that will reference the button clicked  Lets call it buttonIndex   lt input type  submit  onclick  buttonIndex 0   name  save  value  Save    gt   lt input type  submit  onclick  buttonIndex 1   name  saveAndAdd  value  Save and add another    gt    Now  you can access that value  0 means the save button was clicked  1 means the saveAndAdd Button was clicked   Second Suggestion  The way I would handle this is to create two JS functions that handle each of the two buttons   First  make sure your form has a valid ID  For this example  I ll say the ID is  myForm   change   lt input type  submit  name  save  value  Save    gt   lt input type  submit  name  saveAndAdd  value  Save and add another    gt    to   lt input type  submit  onclick  submitFunc   return false    name  save  value  Save    gt   lt input type  submit  onclick  submitAndAddFunc   return false    name  saveAndAdd  value  Save and add    the return false  will prevent your form submission from actually processing  and call your custom functions  where you can submit the form later on   Then your functions will work something like this     function submitFunc           Do some asyncrhnous stuff  that will later on submit the form     if  okToSubmit            document getElementById  myForm   submit            function submitAndAddFunc           Do some asyncrhnous stuff  that will later on submit the form     if  okToSubmit            document getElementById  myForm   submit

User · Answer

I use Ext  so I ended up doing this   var theForm   Ext get  theform    var inputButtons   Ext DomQuery jsSelect  input type  submit     theForm dom   var inputButtonPressed   null  for  var i   0  i  lt  inputButtons length  i          Ext fly inputButtons i   on  click   function             inputButtonPressed   this         inputButtons i        and then when it was time submit I did  if  inputButtonPressed     null  inputButtonPressed click    else theForm dom submit      Wait  you say  This will loop if you re not careful  So  onSubmit must sometimes return true     Notice I m not using Ext here  because they can t stop the submit theForm dom onsubmit   function          if  gottaDoSomething               Do something asynchronous  call the two lines above when done          gottaDoSomething   false          return false            return true

User · Answer

All of the answers above are very good but I cleaned it up a little bit   This solution automatically puts the name of the submit button pressed into the action hidden field   Both the javascript on the page and the server code can check the action hidden field value as needed   The solution uses jquery to automatically apply to all submit buttons    lt input type  hidden  name  action  id  action    gt   lt script language  javascript  type  text javascript  gt        document  ready function                when a submit button is clicked  put its name into the action hidden field             submit   click function          action   val this name                lt  script gt   lt input type  submit  class  bttn  value   lt  lt  Back  name  back    gt   lt input type  submit  class  bttn  value  Finish  name  finish    gt   lt input type  submit  class  bttn  value  Save  name  save    gt   lt input type  submit  class  bttn  value  Next  gt  gt   name  next    gt   lt input type  submit  class  bttn  value  Delete  name  delete    gt   lt input type  button  class  bttn  name  cancel  value  Cancel  onclick  window close       gt    Then write code like this into your form submit handler    if      action   val       delete          return confirm  Are you sure you want to delete the selected item

User · Answer

lt form onsubmit  quot alert this submitted   return false  quot  gt       lt input onclick  quot this form submitted this value  quot  type  quot submit quot  value  quot Yes quot    gt       lt input onclick  quot this form submitted this value  quot  type  quot submit quot  value  quot No quot    gt   lt  form gt   jsfiddle for the same

[javascript] Form onSubmit determine which submit button was pressed

Examples related to javascript

Examples related to html