jQuery serializeArray не включает нажатую кнопку отправки - PullRequest
Новая
       37

jQuery serializeArray не включает нажатую кнопку отправки

53 голосов
/ 24 октября 2010

У меня есть форма с двумя кнопками.Один для сохранения записи, а другой для отмены процедуры сохранения.Я использую 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>

Ответы [ 5 ]

67 голосов
/ 24 октября 2010

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

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

$("#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
});
5 голосов
/ 30 июня 2012

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

 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());
 });
4 голосов
/ 26 октября 2018

Довольно аккуратный способ решить эту проблему: 

<form>
    <input type="hidden" name="stuff" value="">
    <button type="submit" onclick="this.form.stuff.value=this.value" value="reset">reset</button>
    <button type="submit" onclick="this.form.stuff.value=this.value" value="delete">delete</button>
</form>
4 голосов
/ 21 марта 2013

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

$(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() });
        });
    });
});
0 голосов
/ 18 августа 2017 
    var form = button.closest('form');
    var serialize = form.serialize();

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