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

我杠杆 document.activeElement 如本答案所示: How to get the focused element with 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 在文本字段中, 文档.活动 未设置。你得自己小心处理 keypress 事件在 input[type="text"] 类似的。

2017-01更新: 为了我的图书馆 Hyperform 我选择不使用 activeElement 但要抓住所有的事件,这会导致提交表单。 The code for this 是在吉瑟布上。

如果您碰巧使用了超表单,则可以通过以下方式访问触发提交的按钮:

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

我实现了这个,我想它会做到的。

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

谢谢你的回复,但这并不是很糟糕…

我创建了一个测试表单,并使用Firebug找到了这个方法来获取值;

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

不幸的是,只有Firefox支持这个事件。

这是一个对我来说更清洁的方法。

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

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

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

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

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

根据 this link ,事件对象包含字段 Event.target ,其中:

返回表示启动事件的对象的字符串。

我刚刚创建了一个页面来测试这个值是什么,它看起来像是表单本身的表示,而不是单击的按钮。换句话说,javascript不提供确定单击按钮的功能。

就戴夫·安德森的 solution 在使用它之前,最好在多个浏览器中测试它。它可能工作得很好,但我不能说任何一种方式。

一种干净的方法是在每个表单按钮上使用Click事件。 以下是带有“保存”、“取消”和“删除”按钮的HTML表单:

<form  name="formname" action="/location/form_action" method="POST">
<input name="note_id" value="some value"/>
<input class="savenote" type="submit" value="Save"/>
<input class="cancelnote" type="submit" value="Cancel"/>
<input class="deletenote" type="submit" value="Delete" />
</form> 

下面是jquery。根据单击的按钮(“保存”或“删除”),我将相应的“操作”发送到相同的服务器功能。如果单击“取消”,我只需重新加载页面。

$('.savenote').click(function(){
   var options = {
       data: {'action':'save'}
   };
   $(this).parent().ajaxSubmit(options);
   });


$('.deletenote').click(function(){
   var options = {
       data: {'action':'delete'}
   };
   $(this).parent().ajaxSubmit(options);
   });


$('.cancelnote').click(function(){
   window.location.reload(true);
   return false;
   });

我搜索并找到了几种获取“提交”按钮的方法 name + value 使用jquery+ajax发送到服务器。我不太喜欢它们…

其中一个最好的是这里介绍的亨特的解决方案!

但我自己又写了一封。

我想分享,因为它很好,而且,根据我的需要,它还可以与通过Ajax加载的表单一起工作(在document.ready之后):

$(document).on('click', 'form input[type=submit]', function(){
    $('<input type="hidden" />').appendTo($(this).parents('form').first()).attr('name', $(this).attr('name')).attr('value', $(this).attr('value'));
});

简单!单击“提交”按钮时,将使用同一个隐藏字段向表单添加一个隐藏字段。 名称 和 价值 提交按钮。

编辑: 下面的版本更容易阅读。此外,它还负责删除以前附加的隐藏字段(在提交同一表单两次的情况下,这在使用Ajax时是完全可能的)。

改进代码:

$(document).on('click', 'form input[type=submit]', function(){
    var name   = $(this).attr('name');
    if (typeof name == 'undefined') return;
    var value  = $(this).attr('value');
    var $form  = $(this).parents('form').first();
    var $input = $('<input type="hidden" class="temp-hidden" />').attr('name', name).attr('value', value);
    $form.find('input.temp-hidden').remove();
    $form.append($input);
});

我确实尝试了提供的一些示例,但它们不适用于我们的目的。

这是一把小提琴: http://jsfiddle.net/7a8qhofo/1/

我面临着一个类似的问题,这就是我们如何以我们的形式解决这个问题。

$(document).ready(function(){

    // Set a variable, we will fill later.
    var value = null;

    // On submit click, set the value
    $('input[type="submit"]').click(function(){
        value = $(this).val();
    });

    // On data-type submit click, set the value
    $('input[type="submit"][data-type]').click(function(){
        value = $(this).data('type');
    });

    // Use the set value in the submit function
    $('form').submit(function (event){
        event.preventDefault();
        alert(value);
        // do whatever you need to with the content
    });
});

(事件)

function submForm(form,event){
             var submitButton;

             if(typeof event.explicitOriginalTarget != 'undefined'){  //
                 submitButton = event.explicitOriginalTarget;
             }else if(typeof document.activeElement.value != 'undefined'){  // IE
                 submitButton = document.activeElement;
             };

             alert(submitButton.name+' = '+submitButton.value)
}


<form action="" method="post" onSubmit="submForm(this, event); return false;">

您可以使用“event.originalevent.x”和“event.originalevent.y”尝试此方法:

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    <title>test</title>
</head>
<body>

    <form id="is_a_form">
        <input id="is_a_input_1" type="submit"><br />
        <input id="is_a_input_2" type="submit"><br />
        <input id="is_a_input_3" type="submit"><br />
        <input id="is_a_input_4" type="submit"><br />
        <input id="is_a_input_5" type="submit"><br />
    </form>

</body>
</html>
<script>
$(function(){

    $.fn.extend({
      inPosition: function(x, y) {

        return this.each(function() {

            try{
                var offset = $(this).offset();

                if ( (x >= offset.left) &&
                     (x <= (offset.left+$(this).width())) &&
                     (y >= offset.top) &&
                     (y <= (offset.top+$(this).height())) )
                {
                    $(this).css("background-color", "red");
                }
                else
                {
                        $(this).css("background-color", "#d4d0c8");
                }
                }
                catch(ex)
                {
                }

        });
      }
    }); 

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

        $("input[type='submit']").inPosition(ev.originalEvent.x ,ev.originalEvent.y);
        return false;

    });

});
</script>

jquery似乎没有提供提交事件的数据。看来你提出的方法是你最好的选择。

只是另一个解决方案,因为没有其他满足我的要求。优势是, 点击并按键(回车和空格键) 检测到。

// Detects the Events
var $form = $('form');
$form.on('click keypress', 'button[type="submit"]', function (ev) {

    // Get the key (enter, space or mouse) which was pressed.
    if (ev.which === 13 || ev.which === 32 || ev.type === 'click') {

        // Get the clicked button
        var caller = ev.currentTarget;

        // Input Validation
        if (!($form.valid())) {
            return;
        }

        // Do whatever you want, e.g. ajax...
        ev.preventDefault();
        $.ajax({
            // ...
        })
    }
}

这对我最有效。

使用更具体的事件处理程序和jquery,您的事件对象就是单击的按钮。如果需要,还可以从该事件中获取委托表单。

$('form').on('click', 'button', function (e) {
  e.preventDefault();
  var
    $button = $(e.target),
    $form = $(e.delegateTarget);
  var buttonValue = $button.val();
});

这个医生有你要开始的一切。 JQuery Doc .