确定从jQuery / JavaScript中单击了哪个提交按钮[重复]

This question already has an answer here:

这个问题在这里已有答案:

How can I get the button that caused the submit from the form submit event? 13 answers

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

I'm ajaxifying some forms from a PHP application I didn't write. To do this, I came up with this clever solution:

我正在从我没写的PHP应用程序中获取一些表单。为此,我提出了这个聪明的解决方案:

jQuery("form").submit(function(event) {
    // get some values from elements on the page:
    var the_form = jQuery(this);
    var data = the_form.serialize();
    var url = the_form.attr( 'action' );
    var button = event.originalEvent.explicitOriginalTarget;

    data = data + "&" + button.name + "=" + button.value;

    // Send the data using post and put the results in a div
    jQuery.post( url, data, function() {
        //Do something crazy
    });

    // stop form from submitting normally
    if (event.preventDefault) 
    { 
        event.preventDefault(); 
    } 
    else 
    {
        event.returnValue = false; 
    }
});

Which works perfectly. I went away rejoicing. The problem is, I inadvertently used a Mozilla/Gecko only property to determine which button was clicked. (event.originalEvent.explicitOriginalTarget) Which means this only works in Firefox. :-(

哪个效果很好。我快乐地离开了。问题是,我无意中使用了Mozilla / Gecko only属性来确定单击了哪个按钮。 (event.originalEvent.explicitOriginalTarget)这意味着这仅适用于Firefox。 :-(

All of this is necessary because the web app I'm augmenting relies on the button name/value being in the post data to process the form correctly. So, my question in simple terms would be:

所有这一切都是必要的,因为我正在扩充的网络应用程序依赖于帖子数据中的按钮名称/值来正确处理表单。所以,我的问题简单来说就是:

What is the best, cross-browser way to determine which button was clicked in jQuery's submit event?

什么是最好的,跨浏览器的方式来确定在jQuery的提交事件中点击了哪个按钮?

Edit: And here is my solution.

编辑:这是我的解决方案。

jQuery("some selector that targets your form").find(":submit").click(function(event) {
    // get some values from elements on the page:
    var the_form = jQuery(this).parents("form");
    var data = the_form.serialize();
    var url = the_form.attr( 'action' );
    var button = event.target;

    data = data + "&" + button.name + "=" + button.value;

    // Send the data using post and put the results in a div
    jQuery.post( url, data, function() {
        //Do something crazy
    });

    // stop form from submitting normally
    if (event.preventDefault) 
    { 
        event.preventDefault(); 
    } 
    else 
    {
        event.returnValue = false; 
    }
});

4 个解决方案

#1

See this question: Crossbrowser equivalent of explicitOriginalTarget event parameter

看到这个问题:Crossbrowser相当于explicitOriginalTarget事件参数

You're going to have to attach the event listeners to the buttons instead of the form to get a good reliable way of determining which one fired the submit.

您将不得不将事件侦听器附加到按钮而不是表单,以获得确定哪一个触发提交的良好可靠方式。

#2

http://api.jquery.com/event.target/

jquery.event.target should work because it is normalised for most browsers.

jquery.event.target应该可以工作,因为它针对大多数浏览器进行了规范化。

jquery.event.currentTarget can be used to retrieve the current item in the event bubbling chain.

jquery.event.currentTarget可用于检索事件冒泡链中的当前项。

Edit-- After some reflection and @greg's suggestion: I've posted a code snippet on jsfiddle.

编辑 - 经过一些反思和@ greg的建议:我在jsfiddle上发布了一个代码片段。

#3

Using click handlers to submit the form is problematic beacuse you cannot use submit event handlers for validation (which is the way pretty much any validator plugin does it). Also, when you are not using AJAX to post, disabling submit buttons can have weird effects in some browsers if done in the click event and not the submit event.

使用点击处理程序提交表单是有问题的,因为你不能使用提交事件处理程序进行验证(这是几乎任何验证器插件的方式)。此外,当您不使用AJAX发布时,禁用提交按钮在某些浏览器中可能会产生奇怪的效果,如果在click事件中完成而不是提交事件。

The way jQuery.Form solves this is to set up a click handler which stores the clicked button (and then clears it with a small timeout), and use the submit handler to actually send the form contents via AJAX.

jQuery.Form解决这个问题的方法是设置一个单击处理程序来存储单击的按钮(然后用一个小的超时清除它),并使用提交处理程序实际通过AJAX发送表单内容。

#4

Here is a function I used to "ajaxify" my forms with jQuery.

这是一个我用来用jQuery“ajaxify”我的表单的函数。

function ajaxifyForm(form, callback)
{
    var clicked

    form.find("button").click(function()
    {
        if (clicked != null) clicked.removeAttr("data-clicked")
        clicked = $(this)
        $(this).attr("data-clicked", 1)
    })

    form.submit(function(event)
    {
        var data = {}
        var name = ""

        form.find(":input").each(function()
        {
            var input = $(this)

            if (!(name = input.attr("name"))) return

            switch (input.attr("type"))
            {
                case "radio":
                case "checkbox":
                    if (input.attr("checked")) data[name] = input.val()
                    break
                case "submit":
                    if (input.attr("data-clicked")) data[name] = input.val()
                    break
                default:
                    data[name] = input.val()
            }
        })

        $.ajax({
            url: form.attr("action"),
            success: function(data)
            {
                if (typeof callback == "function") callback("success")
            },
            error: function()
            {
                if (typeof callback == "function") callback("error")
            },
            data: data,
            type: form.attr("method")
        })

        return false
    })

    return form
}

#1