Определение кнопки отправки нажатием на jQuery/JavaScript

Я использую некоторые формы из приложения 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, чтобы определить, какая кнопка была нажата. (event.originalEvent.explicitOriginalTarget) Это означает, что это работает только в Firefox.:-(

Все это необходимо, потому что веб-приложение, которое я увеличиваю, полагается на имя/значение кнопки, находящееся в данных сообщения, чтобы правильно обработать форму. Итак, мой вопрос простыми словами:

Какой лучший, кросс-браузерный способ определить, какая кнопка была нажата в jQuery submit?

Edit: И вот мое решение.

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

ОТВЕТЫ

Ответ 2

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

jquery.event.target должен работать, потому что он нормализуется для большинства браузеров.

jquery.event.currentTarget можно использовать для извлечения текущего элемента в цепочке пузырьков событий.

Edit-- После некоторого размышления и предложения @greg: Я опубликовал фрагмент кода в jsfiddle.

Ответ 3

Использование обработчиков кликов для отправки формы является проблематичным beacuse, вы не можете использовать обработчики событий отправки для валидации (что делает его практически любым плагином-валидатором). Кроме того, когда вы не используете AJAX для публикации, отключение кнопок отправки может иметь странные эффекты в некоторых браузерах, если они сделаны в событии клика, а не в событии отправки.

Способ jQuery.Form решает, что это настроить обработчик кликов, который хранит нажатую кнопку (а затем очищает ее с небольшим таймаутом), и используйте обработчик отправки для фактического отправки содержимого формы через AJAX.

Ответ 4

Вот функция, которую я использовал для "ajaxify" моих форм с помощью jQuery.

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
}