Question

我正在从一个我没写过的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; 
    }
});

完美无缺。我快乐地离开了。问题是，我无意中使用了Mozilla / Gecko only属性来确定单击了哪个按钮。（event.originalEvent.explicitOriginalTarget）这意味着这仅适用于Firefox。 :-(

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

确定在jQuery的提交事件中点击了哪个按钮的最佳，跨浏览器方式是什么？

修改这是我的解决方案。

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; 
    }
});

Answer 1

请参阅此问题：Crossbrowser equivalent of explicitOriginalTarget event parameter

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

Answer 2

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

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

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

Edit-- 经过一番反思和@ greg的建议：我发布了一个代码段on jsfiddle。

Answer 3

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

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

Answer 4

这是我用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
}

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

4 个答案: