jQuery how to get which button was clicked upon form submission

Question

I have a  submit   event set up for form submission   I also have multiple forms on the page  but just one here for this example   I d like to know which submit button was clicked without applying a  click   event to each one   Here s the setup    lt html gt   lt head gt     lt title gt jQuery research  forms lt  title gt     lt script type  text javascript  src     jquery-1 5 2 min js  gt  lt  script gt     lt script type  text javascript  language  javascript  gt          document  ready function                 form name  testform     submit  function event   process form submission event                        function process form submission  event               event preventDefault                var target     event target             var me   event currentTarget            var data   me data value            var which button                  lt -- this is what I want to know           alert   data      data      button      which button               lt  script gt   lt  head gt   lt body gt   lt h2 gt Here s my form  lt  h2 gt   lt form action  nothing  method  post  name  testform  gt     lt input type  hidden  name  data  value  blahdatayadda    gt     lt input type  submit  name  name1  value  value1    gt     lt input type  submit  name  name2  value  value2    gt   lt  form gt   lt  body gt   lt  html gt    Live example on jsfiddle  Besides applying a  click   event on each button  is there a way to determine which submit button was clicked

User · Answer

This is the solution used by me and work very well:

_x000D_

// prevent enter key on some elements to prevent to submit the form_x000D_
function stopRKey(evt) {_x000D_
  evt = (evt) ? evt : ((event) ? event : null);_x000D_
  var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);_x000D_
  var alloved_enter_on_type = ['textarea'];_x000D_
  if ((evt.keyCode == 13) && ((node.id == "") || ($.inArray(node.type, alloved_enter_on_type) < 0))) {_x000D_
    return false;_x000D_
  }_x000D_
}_x000D_
_x000D_
$(document).ready(function() {_x000D_
  document.onkeypress = stopRKey;_x000D_
  // catch the id of submit button and store-it to the form_x000D_
  $("form").each(function() {_x000D_
    var that = $(this);_x000D_
_x000D_
    // define context and reference_x000D_
    /* for each of the submit-inputs - in each of the forms on_x000D_
    the page - assign click and keypress event */_x000D_
    $("input:submit,button", that).bind("click keypress", function(e) {_x000D_
      // store the id of the submit-input on it's enclosing form_x000D_
      that.data("callerid", this.id);_x000D_
    });_x000D_
  });_x000D_
_x000D_
  $("#form1").submit(function(e) {_x000D_
    var origin_id = $(e.target).data("callerid");_x000D_
    alert(origin_id);_x000D_
    e.preventDefault();_x000D_
_x000D_
  });_x000D_
});

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>_x000D_
<form id="form1" name="form1" action="" method="post">_x000D_
  <input type="text" name="text1" />_x000D_
  <input type="submit" id="button1" value="Submit1" name="button1" />_x000D_
  <button type="submit" id="button2" name="button2">_x000D_
    Submit2_x000D_
  </button>_x000D_
  <input type="submit" id="button3" value="Submit3" name="button3" />_x000D_
</form>

_x000D_

User · Answer

It helped me https   stackoverflow com a 17805011 1029257  Form submited only after submit button was clicked   var theBtn       focus    if theBtn is   submit                  return true     return false

User · Answer

For me  the best solutions was this     form  submit function e          Get the button that was clicked           var submit     this id  context activeElement         You can get its name like this    alert submit name         You can get its attributes like this too    alert   submit  attr  class

User · Answer

Working with this excellent answer  you can check the active element  the button   append a hidden input to the form  and optionally remove it at the end of the submit handler      form form-js   submit function event       var frm     this       var btn     document activeElement       if          btn length  amp  amp          frm has btn   amp  amp          btn is  button type  submit    input type  submit    input type  image      amp  amp          btn is   name                   frm append   lt input type  hidden  id  form-js-temp  name      btn attr  name        value      btn val        gt                   Handle the form submit here          form-js-temp   remove          Side note  I personally add the class form-js on all forms that are submitted via JavaScript

User · Answer

When the form is submitted   document activeElement will give you the submit button that was clicked   document activeElement getAttribute  value   will give you that button s value    Note that if the form is submitted by hitting the Enter key  then document activeElement will be whichever form input that was focused at the time  If this wasn t a submit button then in this case it may be that there is no  quot button that was clicked  quot

User · Answer

You want to use window event srcElement id like this   function clickTheButton      var Sender   window event srcElement  alert  the item clicked was     Sender id       for a button that looks like    lt input type  button  id  myButton  onclick  clickTheButton     value  Click Me   gt    you will get an alert that reads   the item clicked was myButton   In your improved example you can add window event srcElement to process form submission and you will have a reference to whichever element invoked the process

User · Answer

I write this function that helps me   var PupulateFormData  function  elem    var arr         elem  find  input name  select name  button name  focus input type  submit   focus   each function          arr   this  attr  name        this  val        return arr       and then Use  var data  PupulateFormData    form

User · Answer

You can create input type  hidden  as holder for a button id information    lt input type  hidden  name  button  id  button  gt   lt input type  submit  onClick  document form name button value   1   value  Do something  name  do something  gt    In this case form passes value  1   id of your button  on submit  This works if onClick occurs before submit      what I am not sure if it is always true

User · Answer

If what you mean by not adding a  click event is that you don t want to have separate handlers for those events  you could handle all clicks  submits  in one function     document  ready function         input type  submit     click  function event   process form submission event             function process form submission  event       event preventDefault        var target     event target     var input     event currentTarget     var which button   event currentTarget value    var data   input parents  form   0  data value      var which button                  lt -- this is what I want to know   alert   data      data      button      which button

User · Answer

This one worked for me      Form   submit function    var btn    this  find  input type submit  focus   val    alert  you have clicked    btn

User · Answer

Try this    document  ready function                form name  quot testform quot     submit  function event                     This is the ID of the clicked button         var clicked button id   event originalEvent submitter id

User · Answer

I also made a solution  and it works quite well   It uses jQuery and CSS   First  I made a quick CSS class  this can be embedded or in a seperate file    lt style type  text css  gt       Clicked             No Attributes          lt  style gt     Next  On the click event of a button within the form add the CSS class to the button  If the button already has the CSS class  remove it   We don t want two CSS classes  Just in case            Adds a CSS Class to the Button That Has Been Clicked         form  input type  submit     click function                   if    this  hasClass  Clicked                            this  removeClass  Clicked                        this  addClass  Clicked               Now  test the button to see it has the CSS class  if the tested button doesn t have the CSS  then the other button will          On Form Submit        form   submit function                     Test Which Button Has the Class         if     input name  name1     hasClass  Clicked                             Button  name1  has been clicked                    else                         Button  name2  has been clicked                      Hope this helps  Cheers

User · Answer

Another possible solution is to add a hidden field in your form    lt input type  hidden  id  btaction   gt    Then in the ready function add functions to record what key was pressed      form myForm  btnSubmit   click function            form myForm  btaction   val 0           form myForm  btnSubmitAndSend   click function            form myForm  btaction   val 1           form myForm  btnDelete   click function            form myForm  btaction   val 2         Now in the form submition handler read the hidden variable and decide based on it   var act      form myForm  btaction   val

User · Answer

Here is my solution          form   submit function e              console log       e originalEvent submitter id            e preventDefault

User · Answer

Similar to Stan answer but      if you have more than one button  you have to get only the first button     0   if the form can be submitted with the enter key  you have to manage a default    myDefaultButtonId       document  on  submit   function event        event preventDefault        var pressedButtonId             typeof     input type submit  focus   0       undefined               myDefaultButtonId                 input type submit  focus   0  id

User · Answer

You can simply get the event object when you submit the form  From that  get the submitter object  As below     quot  review-form quot   submit function  e            e preventDefault       avoid to execute the actual submit of the form           let submitter btn     e originalEvent submitter                    console log submitter btn attr  quot name quot        In case you want to send this form to the backend  you can create a new form element by new FormData   and set the key-value pair for which button was pressed  then access it in the backend  Something like this -    quot  review-form quot   submit function  e            e preventDefault       avoid to execute the actual submit of the form           let form     this           let newForm   new FormData   form  0            let submitter btn     e originalEvent submitter                    console log submitter btn attr  quot name quot              if  submitter btn attr  quot name quot       quot approve btn quot                 newForm set  quot action for quot   submitter btn attr  quot name quot               else if  submitter btn attr  quot name quot       quot reject btn quot                 newForm set  quot action for quot   submitter btn attr  quot name quot               else               console log  quot there is some error  quot                return               I was basically trying to have a form where user can either approve or disapprove  reject a product for further processes in a task  My HTML form is something like this -  lt form method  quot POST quot  action  quot    url  tasks review-task  taskid product task id id    quot      class  quot review-form quot  gt         csrf token         lt input type  quot hidden quot  name  quot product id quot  value  quot   product product id   quot    gt       lt input type  quot hidden quot  name  quot task id quot  value  quot   product task id id   quot    gt       lt button type  quot submit quot  name  quot approve btn quot  class  quot btn btn-link quot  id  quot approve-btn quot  gt           lt i class  quot fa fa-check quot  style  quot color  rgb 63  245  63   quot  gt  lt  i gt       lt  button gt       lt button type  quot submit quot  name  quot reject btn quot  class  quot btn btn-link quot  id  quot reject-btn quot  gt               lt i class  quot fa fa-times quot  style  quot color  red  quot  gt  lt  i gt       lt  button gt   lt  form gt   Let me know if you have any doubts

User · Answer

I asked this same question  How can I get the button that caused the submit from the form submit event   I ended up coming up with this solution and it worked pretty well     document  ready function            form   submit function              var val      input type submit  clicked true    val               DO WORK                form input type submit    click function                input type submit      this  parents  form    removeAttr  clicked              this  attr  clicked    true                    In your case with multiple forms you may need to tweak this a bit but it should still apply

User · Answer

A simple way to distinguish which  lt button gt  or  lt input type  button     gt  is pressed  is by checking their  id       button   click function       var id     this  attr  id

User · Answer

form   submit function  ev      let clickedButton   ev originalEvent explicitOriginalTarget

User · Answer

As I can t comment on the accepted answer  I bring here a modified version that should take into account elements that are outside the form  ie  attached to the form using the form attribute   This is for modern browser  http   caniuse com  feat form-attribute   The closest  form    is used as a fallback for unsupported form attribute    document  on  click     type submit    function         var form     this  prop  form        this  closest  form   0         form elements  filter   type submit    removeAttr  clicked         this  attr  clicked   true           form   on  submit   function         var submitter     this elements  filter   clicked

User · Answer

I was able to use jQuery originalEvent submitter on Chrome with an ASP Net Core web app  My  cshtml form   lt div class  quot form-group quot  id  quot buttons grp quot  gt       lt button type  quot submit quot  name  quot submitButton quot  value  quot Approve quot  class  quot btn btn-success quot  gt Approve lt  button gt       lt button type  quot submit quot  name  quot submitButton quot  value  quot Reject quot  class  quot btn btn-danger quot  gt Reject lt  button gt       lt button type  quot submit quot  name  quot submitButton quot  value  quot Save quot  class  quot btn btn-primary quot  gt Save lt  button gt           The jQuery submit handler   section Scripts         await Html RenderPartialAsync  quot  ValidationScriptsPartial quot      lt script type  quot text javascript quot  gt        document  ready function                    Ensure that we log an explanatory comment if  quot Reject quot          update task form   on  submit   function  e            let text   e originalEvent submitter textContent          if  text     quot Reject quot                   Do stuff                               The jQuery Microsoft bundled with my ASP Net Core environment is v3 3 1

User · Answer

form input type submit    click function             lt input   gt             attr  type    hidden            attr  name     this  attr  name             attr  value     this  attr  value         appendTo this        add hidden field

User · Answer

Here is a sample  that uses this form to get the correct form the submit is into  and data fields to store the last clicked focused element  I also wrapped submit code inside a timeout to be sure click events happen before it is executed  some users reported in comments that on Chrome sometimes a click event is fired after a submit    Works when navigating both with keys and with mouse fingers without counting on browsers to send a click event on RETURN key  doesn t hurt though   I added an event handler for focus events for buttons and fields   You might add buttons of type  submit  to the items that save themselves when clicked   In the demo I set a red border to show the selected item and an alert that shows name and value label   Here is the FIDDLE  And here is the  same  code   Javascript      form   submit function e      e preventDefault         Use this for rare buggy cases when click event is sent after submit   setTimeout function          var  this   this       var lastFocus    this data  lastFocus        var  defaultSubmit null       if lastFocus   defaultSubmit   lastFocus        if   defaultSubmit      defaultSubmit is  input type submit                If for some reason we don t have a submit  find one  the first         defaultSubmit   this  find  input type submit    first               if  defaultSubmit          var submitName  defaultSubmit attr  name          var submitLabel  defaultSubmit val               Just a demo  set hilite and alert       doSomethingWith  defaultSubmit         setTimeout function    alert  Submitted   submitName       submitLabel       1000         else            There were no submit in the form            bind this  0            form input   focus function         this form  data  lastFocus   this          form input   click function         this form  data  lastFocus   this           Just a demo  setting hilite function doSomethingWith  aSelectedEl       aSelectedEl css   border   4px solid red       setTimeout function      aSelectedEl removeAttr  style      1000       DUMMY HTML    lt form gt   lt input type  text  name  testtextortexttest  value  Whatever you write  sir    gt   lt input type  text  name  moretesttextormoretexttest  value  Whatever you write  again  sir    gt    lt input type  submit  name  test1  value  Action 1   gt   lt input type  submit  name  test2  value  Action 2   gt   lt input type  submit  name  test3  value  Action 3   gt   lt input type  submit  name  test4  value  Action 4   gt   lt input type  submit  name  test5  value  Action 5   gt   lt  form gt    DUMB CSS   input  display block

User · Answer

Building on what Stan and yann-h did but this one defaults to the first button   The beauty of this overall approach is that it picks up both the click and the enter key  even if the focus was not on the button   If you need to allow enter in the form  then just respond to this when a button is focused  i e  Stan s answer    In my case  I wanted to allow enter to submit the form even if the user s current focus was on the text box   I was also using a  name  attribute rather than  id  but this is the same approach   var pressedButtonName        typeof     input type submit  focus   0       undefined             input type submit  first   0  name            input type submit  focus   0  name

User · Answer

I found that this worked     document  ready function             form    submit function                 Get the submit button element         var btn     this  find  input type submit  focus

User · Answer

I have found the best solution is    document activeElement  attr  id     This not only works on inputs  but it also works on button tags  Also it gets the id of the button

User · Answer

Wow  some solutions can get complicated  If you don t mind using a simple global  just take advantage of the fact that the input button click event fires first  One could further filter the    input   selector for one of many forms by using     myForm input           document  ready function          var clkBtn                input type  submit     click function evt            clkBtn   evt target id                       myForm   submit function evt            var btnID   clkBtn          alert  form submitted  button id     btnID

User · Answer

Here s the approach that seems cleaner for my purposes   First  for any and all forms      form   click function event        this  data  clicked    event target         When this click event is fired for a form  it simply records the originating target  available in the event object  to be accessed later  This is a pretty broad stroke  as it will fire for any click anywhere on the form  Optimization comments are welcome  but I suspect it will never cause noticeable issues   Then  in    form   submit    you can inquire what was last clicked  with something like  if    this  data  clicked   is   name no ajax     xhr abort

User · Answer

This works for me      form   submit function           Print the value of the button that was clicked    console log   document activeElement  val

[jquery] jQuery: how to get which button was clicked upon form submission?

Examples related to jquery

Examples related to forms