jquery detect which button submitted form

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'd like to detect which triggered the form submit event using just:

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

Obviously that selector will always return the value of the first bttnsubmit element it comes across, so I need some other magic selector or filter or something.

I have seen $('[name=bttnsubmit][clicked=true]') touted about but that has not yet worked in my attempts...

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

Any help/tips much appreciated.

F

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 click event of the buttons and store a global reference of the value. Something like this:

var ButtonValue;

$('button[type="submit"]').click(function(e){
   ButtonValue = $(this).val();
});

$('#my-form').submit(function(){
    //psuedo code
    if(ButtonValue == 1)
    {
        ....
    }
});

March

Answer 2

This answer is an improvement of @musefan's answer.

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

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

And in submit handler just get it:

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

Form could be submitted by hitting 'enter'. To avoid null in submittedBy variable:

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

Cortico

Hm, this doesn't actually seem to work for me. The button click handler is being ignored in favor of the form submit handler. – Taboret

facepalm disregard ^ It's because I am using an <input> not a <button> :) – Taboret

Answer 3

HTML DOM throws an active element property when an element is clicked. It returns the currently focused element in the DOM. When submitting the form by clicking a submit button you can detect this element in Jquery and perform necessary operations on it. This method is better than other since you may change your element from button type="submit" to input type="submit" and it will still work. You can change the ID and class of the element and it will still work. YOu may add both submit button or input button or no matter how many button you add it will still work. To detect this button in Jquery, you can use this code to detect the active element.

$('#my-form').submit(function(){
   var value=$(document.activeElement).val();
//psuedo code
    if(value == 1)
    {
        Your code....
    }
});

The above code will return the button that was clicked when the form was submitted. This code can be also be useful if you are try to submit a form while clicking a button which does not have submit attribute or by clicking a button which is outside of the form and even for those on which the click creates a virtual form and submits.

P.S. Tested on firefox 45 and above, chrome 67 and above

Horsepowerhour

The one line additional code works perfectly. I used it to get the data element of the button submitting the form like this: let data = $(document.activeElement).data('dataElementName'); – Piddock

Answer 4

Regarding your statement:

I have seen $('[name=bttnsubmit][clicked=true]') touted about but that has not yet worked in my attempts...

I found this to not be explained correctly elsewhere. It's not an automatic thing. You still need to set it up by adding the "clicked" attribute any time a submit button is clicked.

$("#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 example here.

Demetri