Как перед отправкой формы собрать определенные поля в json массив name:value?

Question

[Aljo]

В форме может быть N-ое количество полей (input, textarea, select) с классом question-field. Каждая группа полей находится внутри блока с классом question-block.

Мне нужно перед отправкой собрать все эти поля в массив и задать этот массив как значение для одного скрытого поля с name=questions.

Пробовал так:

if (form.find('.question-block').length) {
                        var data = form.find('.question-block').map(function() {
                            var obj = {};
                            $(this).find('.question-field').each(function() {
                                obj[$(this).attr('name')] = $(this).attr('value');
                            })
                            return obj;
                        }).get();
                        console.log(data);
                        form.find('input[name="questions"]').val(data);
                    }

Но почему-то в консоли у некоторых полей значение указано как undefined.
Обработчиком я вывожу значения полей и у questions указано:
[questions] => [object Object]

Что делаю не так? Как реализовать этот момент?

Comments

[Вадим]

Что делаю не так?

1) Много излишних поисков по DOM. Зачем искать question-block, а потом ещё раз, а потом ещё и отдельно question-field? Почему не найти один раз question-field, не сохранить в переменную и дальше уже с ней работать?
2) Не уверен, давно на jQuery не писал, но функция-коллбэе у each принимает в качестве аргумента индекс элемента, а вторым аргументом сам элемент. this - точно в данном случае текущий элемент цикла? Читабельнее было бы всё же использовать аргументы.
3) $(this).attr('value'); но зачем? Если this в данном контексте - очередной элемент question-field, то почему бы не просто this.value?

[Aljo]

Вадим,

1) Много излишних поисков по DOM. Зачем искать question-block, а потом ещё раз, а потом ещё и отдельно question-field? Почему не найти один раз question-field, не сохранить в переменную и дальше уже с ней работать?

Потому что нужно, чтобы каждая группа полей внутри question-block, была в отдельном подмассиве.

2) Не уверен, давно на jQuery не писал, но функция-коллбэе у each принимает в качестве аргумента индекс элемента, а вторым аргументом сам элемент. this - точно в данном случае текущий элемент цикла? Читабельнее было бы всё же использовать аргументы.

Да, точно

3) $(this).attr('value'); но зачем? Если this в данном контексте - очередной элемент question-field, то почему бы не просто this.value?

Да, это я и написал в ответе, заменил на $(this).val() - синтаксис jQuery

[Вадим]

Aljo,

Потому что нужно...

var blocks = form.find('.question-block')
if (blocks.length) {
    var data = blocks.map(function() {

[Вадим]

Aljo, ну а ещё, раз уж Вы работаете с данными на основе DOM, то можно просто каждому question-field прописать в data-атрибут значение его "группы". Типа data-group-name="javascript"
И тогда просто перебирать все question-field и по значению этого атрибута засовывать его значение в нужную группу внутри объекта.
аля
questions = {javascript: [], css: [],...}
Таким образом - 1 обход DOM и нет вложенных циклов, а blocks вообще становятся не важны.

[Aljo]

Вадим, согласен, спасибо так и сделаю

Answer 1

[Aljo]

Разобрался. Просто стоило вместо $(this).attr('value'); написать $(this).val();