7

I have a form with 2 submit buttons.

<form class="myForm">
     <!-- Some Inputs Here -->
     <input type="submit" name="firstSubmit" value="first submit" />
     <input type="submit" name="secondSubmit" value="second submit" />
</form>

I am submitting this form via JQuery.

$(".myForm").submit(function(){
      var submitButton = ? //I need to catch the submit button that was clicked
});

How can I know which submit button was clicked?

Ali Bassam
  • 9,691
  • 23
  • 67
  • 117
  • 1
    looks exactly like http://stackoverflow.com/questions/3577469/form-onsubmit-determine-which-submit-button-was-pressed – John Newman Apr 02 '13 at 20:45
  • http://stackoverflow.com/questions/5721724/jquery-how-to-get-which-button-was-clicked-upon-form-submission The answer to this is the top answer on the thread linked. – Swapnull Apr 02 '13 at 20:47

3 Answers3

10
$('input[type="submit"]').on('click', function(){
      $('.myForm').data('button', this.name);
});

$(".myForm").on('submit', function(){
  var submitButton = $(this).data('button') || $('input[type="submit"]').get(0).name;
});
adeneo
  • 312,895
  • 29
  • 395
  • 388
  • Using `.submit()` is a must, anyway to get the submitted button when using it? – Ali Bassam Apr 02 '13 at 20:46
  • @AliBassam - Sure, just store the clicked button in data(). – adeneo Apr 02 '13 at 20:50
  • This is far better than the alternatives I've seen, and this even defaults to the first button's name if the enter key is pressed. Although really, this should be using/submitting the button's value, not its name. – Triynko Nov 30 '15 at 06:35
7

There is now a standard submitter property in the submit event.
Already implemented in firefox!

document.addEventListener('submit',function(e){
    console.log(e.submitter)
})

in jQuery you just write

$(".myForm").on('submit', function(e){
  e.originalEvent.submitter
});

for browsers not supporting it use this polyfill:

!function(){
    var lastBtn = null
    document.addEventListener('click',function(e){
        if (!e.target.closest) return;
        lastBtn = e.target.closest('button, input[type=submit]');
    }, true);
    document.addEventListener('submit',function(e){
        if (e.submitter) return;
        var canditates = [document.activeElement, lastBtn];
        for (var i=0; i < canditates.length; i++) {
            var candidate = canditates[i];
            if (!candidate) continue;
            if (!candidate.form) continue;
            if (!candidate.matches('button, input[type=button], input[type=image]')) continue;
            e.submitter = candidate;
            return;
        }
        e.submitter = e.target.querySelector('button, input[type=button], input[type=image]')
    }, true);
}();
Tobias Buschor
  • 3,075
  • 1
  • 22
  • 22
6

Try this:

$(".myForm").submit(function(){
      var submitButton = $(":focus", this);
});
David Buck
  • 3,752
  • 35
  • 31
  • 35
Marcos
  • 61
  • 1
  • 2
  • Hi Marcos, thank you for your contribution. In order to give more support to your answer, I would suggest you to explain a little bit better the line of thought behind your proposed solution – Seymour Apr 25 '20 at 09:16