JQuery serializeArray не включает кнопку отправки, которая была нажата

У меня есть форма, которая имеет две кнопки. Один для сохранения записи, а другой для отмены процедуры сохранения. Я использую rails.js (обычный плагин AJAX/jQuery для тех из вас, кто не знает) javascript файл, который работает с jQuery для ненавязчивых вызовов javascript/ajax. Когда я отправляю данные формы через ajax, я хочу, чтобы имя и значение кнопки, на которую я нажал, были отправлены вместе с остальными данными, чтобы я мог принять решение о том, что делать, на основе того, какая кнопка была нажата.

Метод в файле rails.js использует .serializeArray() для отправки данных формы на сервер. Проблема в том, что это не включает пару имя/значение кнопки, которую я нажал. На веб-сайте jQuery говорится, что они делают это специально (хотя мое мнение, что они должны):

"Метод .serializeArray() использует стандартные правила W3C для удаленных элементов управления, чтобы определить, какие элементы он должен включать, в частности элемент не может быть отключен и должен содержать атрибут имени. Значение кнопки отправки не сериализуется, поскольку форма не была отправлена ​​с помощью кнопки."

Как они могут предположить, что форма не была отправлена ​​с помощью кнопки? Полагаю, это не имеет смысла и ошибочного предположения.

В соответствии с правилами W3C кнопка, которая была активирована для отправки формы, считается успешным контролем.

Поскольку разработчики jQuery решили сделать это специально, могу ли я предположить, что существует другой метод, который НЕ НЕ исключает активированную кнопку в сериализации?

РЕДАКТИРОВАТЬ: Вот быстрый пример того, как будет выглядеть моя форма...

<!DOCTYPE html5>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $('#form').submit(function(e) {
      // put your breakpoint here to look at e
      var x = 0;
    });
  });
</script>
</head>
<body>
  <form id="form">
    <input name="name" type="text"><br/>
    <input name="commit" type="submit" value="Save"/>
    <input name="commit" type="submit" value="Cancel"/>
  </form>
</body>

ОТВЕТЫ

Ответ 1

Нет, поведение основано на событии submit <form>, а не на кнопке, например. нажатие введите или вызовите .submit() в JavaScript. Вы смешиваете 2 понятия здесь, .serialize() или .serializeArray() может иметь или не иметь ничего общего с нажатием кнопки - это просто отдельное событие в целом, они не связаны. Эти методы на более высоком уровне, чем это: вы можете сериализовать форму (или ее подмножество) в любое время по любой причине.

Однако вы можете добавить пару имени/значения submit, как обычная форма, отправляемая с этой кнопки, если вы отправляете с помощью кнопки, например:

$("#mySubmit").click(function() {
  var formData = $(this).closest('form').serializeArray();
  formData.push({ name: this.name, value: this.value });
  //now use formData, it includes the submit button
});

Ответ 2

Я использую следующий фрагмент, в основном добавляет скрытый элемент с тем же именем

 var form = $("form");
 $(":submit",form).click(function(){
            if($(this).attr('name')) {
                $(form).append(
                    $("<input type='hidden'>").attr( { 
                        name: $(this).attr('name'), 
                        value: $(this).attr('value') })
                );
            }
        });

 $(form).submit(function(){
     console.log($(this).serializeArray());
 });

Ответ 3

Это решение является "универсальным", так как в нем будут обрабатываться все ваши входные представления, передавая их как переменную формы при отправке.

$(document).ready(function(){
    $('input:submit').each(function(){
        $(this).click(function(){
            var formData = $(this).closest('form').serializeArray();
            formData.push({ name: $(this).attr('name'), value: $(this).val() });
        });
    });
});

Ответ 4

    var form = button.closest('form');
    var serialize = form.serialize();

    if (button.attr('name') !== undefined) {
        serialize += '&'+button.attr('name')+'=';
    }