Не нравятся результаты поиска? Попробуйте другой поиск!
dle-faq.ru FAQ (все вопросы) jQuery Почему serialize в Jquery не передает значение кнопки submit?

Почему serialize в Jquery не передает значение кнопки submit?


     04.04.2016    jQuery    517

вопрос
Добрый день.
Не нашёл ответ на вопрос как получить все данные формы через JQuery/JS.

HTML
<form id="ajaxform">
<button type="submit" name="n1" value="1">Submit 1</button>
<button type="submit" name="n1" value="2">Submit 2</button>
</form>
<div id="console"></div>


JS
$('form#ajaxform').submit(function(){
console.log($(this).serializeArray());
$('#console').html($(this).serializeArray());
return !1
})


Пример: https://jsfiddle.net/qm4eaqL9/

Каким образом получить реально отправленные данные через событие submit, а не просто данные формы от serializeArray? Ответ пока не нашёл, кроме как перехватывать событие click на submit, а не само событие submit.

Ответил: jasonrammoray


Если вам интересны детали, то можно взглянуть на исходный код jQuery.
В частности, взглянем на часть тела метода serializeArray (http://code.jquery.com/jquery-latest.js):

.filter(function() {
            var type = this.type;
            // Use .is(&quot;:disabled&quot;) so that fieldset[disabled] works
            return this.name && !jQuery( this ).is( &quot;:disabled&quot; ) &&
                rsubmittable.test( this.nodeName ) && !rsubmitterTypes.test( type ) &&
                ( this.checked || !rcheckableType.test( type ) );


Переменная rsubmittable есть литерал регулярного выражения, которое определяет список подлежащих сериализации html элементов:
rsubmittable = /^(?:input|select|textarea|keygen)/i;


Как видим, button не из числа таких.

rsubmitterTypes есть еще один литерал регулярного выражения, отрицание результатов проверки которого на входной строке позволяет сделать вывод о допустимости сериализации элемента.

rsubmitterTypes = rsubmitterTypes = /^(?:submit|button|image|reset|file)$/i,


Как видим, если элемент имеет тип "submit", то он будет пропущен и не появится в результирующем массиве сериализованных элементов.

Комментарии пользователей (7)

Sander
1126

1637 | 1204

Sander - 4 апреля 2016 15:30 - Эксперт

Лучше ничего не придумывается...
$(document).on('submit','form#ajaxform',function(e){
    e.preventDefault();
    var s = $(this).serializeArray();
    var el = $(e.delegateTarget.activeElement);
    s.push({
        name: el.attr('name'),
        value: el.val()
    });
    console.log(s);
})

SanDev.pro - мой блог.

ICQ: 404-037-556
Skype: Sander8804

jasonrammoray
3

9 | 12

jasonrammoray - 4 апреля 2016 18:54 - Юзер

nowheremany, причина по которой объекты, соответствующие кнопкам отправки формы, не появляются в массиве, возвращаемом в результате вызова serializeArray() заключается в том, что данный метод не сериализирует кнопки отправки формы.
Согласно документации jQuery:
"No submit button value is serialized since the form was not submitted using a button. Data from file select elements is not serialized."
https://api.jquery.com/serializeArray/

jasonrammoray
3

9 | 12

jasonrammoray - 4 апреля 2016 19:13 - Юзер

***Комментарий удален***

ПафНутиЙ
1065

3396 | 2434

ПафНутиЙ - 4 апреля 2016 20:51 - Админ

Отличное объяснение!
Осталось научиться использовать тег code в редакторе smile

Каков вопрос - таков и ответ. Просто помните об этом.

dj-avtosh
39

1479 | 390

dj-avtosh - 4 апреля 2016 20:57 - шашлычник

Так бы все объясняли четко.

skype: elhan.isaev

jasonrammoray
3

9 | 12

jasonrammoray - 4 апреля 2016 21:28 - Юзер

Если интересно почему jQuery делает именно так, то давайте взглянем на исходный код, а именно на часть тела метода
serializeArray():



.filter(function() {
            var type = this.type;
            // Use .is(":disabled") so that fieldset[disabled] works
            return this.name && !jQuery( this ).is( ":disabled" ) &&
                rsubmittable.test( this.nodeName ) && !rsubmitterTypes.test( type ) &&
                ( this.checked || !rcheckableType.test( type ) );
        })


rsubmittable
в данном случае есть литерал регулярного выражения:

rsubmittable = /^(?:input|select|textarea|keygen)/i;


Это означает, что только тэг button будет проигнорирован и не попадет в массив объектов, представляющих собой сериализованные версии элементов формы.

rsubmitterTypes
в данном случае еще один литерал регулярного выражения:

rsubmitterTypes = /^(?:submit|button|image|reset|file)$/i,


В теле метода
serializeArray
мы видим, что отрицание результата проверки типа элемента формы на предмет соответствия регулярному выражению (в переменной
 rsubmitterTypes
) является частью логического И (конъюнкции), определяющего факт необходимости сериализации элемента.

Это означает, что элемент
<input type="submit" /> 
будет проигнорирован jQuery и не будет включен в массив, возвращаемый методом
serializeArray
, так как отрицание результата проверки типа элемента формы на предмет соответствия вышеуказанному регулярному выражению даст false.

nowheremany
192

1659 | 1292

nowheremany - 4 апреля 2016 23:29 - Эксперт

Всем спасибо за обсуждение.
Не знал о delegateTarget.activeElement, это решает проблему

Благодарность принимаю тут Связь

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы