Jquery detects which button is sent

Question

I have a form with the following:

<form id="my-form" ...> ... <button type="submit" name="bttnsubmit" value="1">The first button</button> <button type="submit" name="bttnsubmit" value="2">The last button</button> </form> 

I would like to determine which one raised the form submit event using only:

 $('#my-form').submit(function(){ //psuedo code if($('[name=bttnsubmit]').val() == 1) { .... } }); 

Obviously, the selector will always return the value of the first bttnsubmit element it encounters, so I need another magic selector or filter, or something like that.

I saw that $('[name=bttnsubmit][clicked=true]') advertised, but this still did not work in my attempts ...

I could, of course, resort to $('[name=bttnsubmit]').click() , but would rather be able to achieve my goals in the submit event.

Any help / advice is greatly appreciated.

Answer 1

I don't know if there is any built-in event data (maybe there is), but one idea that comes to mind is to handle the button click event and save the global value reference. Something like that:

 var ButtonValue; $('button[type="submit"]').click(function(e){ ButtonValue = $(this).val(); }); $('#my-form').submit(function(){ //psuedo code if(ButtonValue == 1) { .... } }); 

Answer 2

This answer is an improvement on @musefan answer.

Avoid global variables. It is better to store data in the form:

 $('button[type=submit]').click(function (e) { var button = $(this); buttonForm = button.closest('form'); buttonForm.data('submittedBy', button); }); 

And in the send handler, just get it:

 $('#my-form').submit(function (e) { var form = $(this); var submittedBy = form.data('submittedBy'); if(submittedBy.val() == 1) { // Any code here... } }); 

A form can be submitted by pressing 'enter'. To avoid null in the submittedBy variable:

 var submittedBy = form.data('submittedBy') || form.find('button[type=submit]:first'); 

Answer 3

Regarding your statement:

I saw that $ ('[name = bttnsubmit] [clicked = true]') is advertised, but this has not yet worked in my attempts ...

I found that this is not explained elsewhere. This is not an automatic thing. You still need to configure it by adding the "clicked" attribute each time you click the submit button.

 $("#my-form input[type=submit]").click(function () { $("input[type=submit]", $(this).parents("form")).removeAttr("clicked"); $(this).attr("clicked", "true"); }); $("#my-form").submit(function () { var clickedSubmitValue = $("input[type=submit][clicked=true]").val(); if (clickedSubmitValue == "1") { ... } }); 

Similar to the example here .