Как перебрать input+textarea с каждого вопроса и записать все в массив?

Question

[dimonfreeman]

Имеем список вопросов, (где есть сам вопрос,и два поля ето оценка и textarea). Нужно при сабмите каким-то образом сформировать массив что бы потом можно было разобрать и в обратную сторону и понять какой вопрос какой ответ.:
Предпологаю должно выйти как-то так
[Question1[score:2,text:textarea],
Question2[score:1,text:textarea]]

Пример верстки первого вопроса.

<label class="form-text-field">
<span class="form-text-quiz-field__label">Текст вопроса номер 1?</span> 
<div class="rating-area q1">
<input id="q1-star-5" type="radio" name="q1" value="5"> 
<label for="q1-star-5" title="5">5</label> <input id="q1-star-4" type="radio" name="q1" value="4"> 
<label for="q1-star-4" title="4">4</label> <input id="q1-star-3" type="radio" name="q1" value="3"> 
<label for="q1-star-3" title="3">3</label> <input id="q1-star-2" type="radio" name="q1" value="2"> 
<label for="q1-star-2" title="2">2</label> <input id="q1-star-1" type="radio" name="q1" value="1"> 
<label for="q1-star-1" title="1">1</label></div> 
<input placeholder="Comment" name="q1" type="textquiz" display="true" autoload="true"  class="form-text-field__input"> <!----></label>

Answer 1

[Сергей Соколов]

1. Найти все label.form-text-field с помощью querySelectorAll().
   
2. Преобразовать в массив [...allLabels]
   
3. Этот массив перебрать map(), формируя из очередного label элемент выходного массива с текстами
   

Попробуйте начать писать, дальше обращайтесь, если застрянете.

Пример получения выбранного значения radio.

Comments

[dimonfreeman]

Чуть завтык,
Cannot read property 'find' of undefined..
хотя ж в

var allLabels= [... document.querySelectorAll( ".quiz-form-step3 label.form-text-field" )];
elements = allLabels.map(function() {
    return { 
label:$(this).find(".form-text-quiz-field__label"),
start:$(this).find(".rating-area input:checked"),
textarea:$(this).find("textarea")
};
});

[Сергей Соколов]

смешали чистый JS и jQuery. Исправить можно так, функция в map() получает элемент:

elements = allLabels.map(function(element) {
// ...
$(element)

но лучше просто отказаться от jQuery совсем:

elements = allLabels.map(function(element) {
// ...
label: element.querySelector(".form-text-quiz-field__label"),

[dimonfreeman]

[dimonfreeman]

Сергей Соколов, var allLabels= [... document.querySelectorAll( ".quiz-form-step3>div" )];
elements = allLabels.map(function(element) {
return {
label:element.querySelector(".form-text-quiz-field__label").innerHTML,
start:element.querySelector(".rating-area input:checked").value,
textarea:element.querySelector("textarea")
};
});

пишет что не найдено, хотя обьекты есть в масиве.. ( Cannot read property 'innerHTML' of null)
хочу взять свойство элемента или value..

[Сергей Соколов]

dimonfreeman, ну вон же, на скрине, у 5-го и 7-го null. Об пятый и спотыкается

[dimonfreeman]

Сергей Соколов, тю епть спасибО) думал '' даст, а он запинаеться...