通过JQuery提交表单时如何获得点击提交按钮

Question

我有一个带有 2 个提交按钮的表单。

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

我正在通过 JQuery 提交此表单。

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

我如何知道点击了哪个提交按钮？

Answer 1

$('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;
});

Answer 2

现在提交事件中有一个标准的submitter 属性。
已经在 Firefox 中实现了！

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

在 jQuery 中你只需编写

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

对于不支持它的浏览器，请使用这个 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);
}();

Answer 3

试试这个：

$(".myForm").submit(function(){
      var submitButton = $(":focus", this);
});