如何从表单提交事件中获取导致提交的按钮？

Question

我正在尝试找到触发表单提交的提交按钮的值

$("form").submit(function() {

});

我可以触发一个$("input [type = submit]").每个按钮的click()事件并设置一些变量,但这似乎不如在提交时从表单中拉出按钮的优雅.

Answer 1

我document.activeElement在这个答案中概述了:如何使用jQuery获得聚焦元素？

$form.on('submit', function() {
    var $btn = $(document.activeElement);

    if (
        /* there is an activeElement at all */
        $btn.length &&

        /* it's a child of the form */ 
        $form.has($btn) &&

        /* it's really a submit element */
        $btn.is('button[type="submit"], input[type="submit"], input[type="image"]') &&

        /* it has a "name" attribute */
        $btn.is('[name]')
    ) {
        console.log("Seems, that this element was clicked:", $btn);
        /* access $btn.attr("name") and $btn.val() for data */
    }
});

我利用了这个事实,点击它后按钮始终是聚焦元素.如果您在点击后立即执行此操作,则无效blur().

@Doin发现了另一个缺点.如果用户enter在文本字段中提交表单,document.activeElement则不会设置.您需要通过处理类似的keypress事件来自己注意这一点input[type="text"].

更新2017-01:对于我的库Hyperform我选择不使用activeElement但是捕获所有事件,导致表单提交.这个代码在Github上.

如果您碰巧使用Hyperform,则可以使用触发提交的按钮:

$(form).on('submit', function(event) {
  var button = event.submittedVia;
});

Answer 2

我实现了这个,我想它会这样做.

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

感谢您的回复,但这并不是非常优雅......

Answer 3

现在submitter提交事件中有一个标准属性。
已经在 Firefox 75 和 Chrome/Edge 81 中实现！

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

对于不支持它的浏览器，请使用此polyfill
注意：如果您针对较旧的浏览器，则需要 polyfill 其他内容，例如closest或matches。并确保在添加提交事件之前加载了 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 ('submitter' in e) return;
        var canditates = [document.activeElement, lastBtn];
        lastBtn = null;
        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 4

我创建了一个测试表单并使用Firebug以这种方式获取值;

$('form').submit(function(event){
  alert(event.originalEvent.explicitOriginalTarget.value);
}); 

不幸的是,只有Firefox支持此事件.

Answer 5

这是一种看起来更清洁的方法.

首先,对于任何和所有形式:

$('form').click(function(event) {
  $(this).data('clicked',$(event.target))
});

当为表单触发此单击事件时,它只记录稍后要访问的原始目标(在事件对象中可用).这是一个相当广泛的笔划,因为它将触发表单上任何位置的任何单击.欢迎优化评论,但我怀疑它永远不会引起明显的问题.

然后,在$('form').submit()中,您可以查询最后点击的内容,例如

if ($(this).data('clicked').is('[name=no_ajax]')) xhr.abort();