Добавьте элемент form, чтобы обернуть в него элементы input. Формы могут получить доступ ко всем входам, которые находятся внутри него, и увидеть их имена и их значения. Поэтому в этом случае важно использовать атрибут value для элементов input. Начните с выполнения вышеупомянутого и сделайте ваш код похожим на пример ниже.
Также будьте осторожны с id. Они должны быть уникальными, поэтому они могут появляться только один раз в каждом документе. Прямо сейчас элементы label и их input имеют одинаковые id.
<form id="step-form">
<div class="one">
...
</div>
</form>
Как и предложил @Shilly, используйте FormData API . Этот API предназначен для получения всех значений из формы, элементов input, textarea и select и размещения всех этих данных в одном объекте. Таким образом, вы можете создать столько элементов формы , сколько захотите, добавить их в форму и сохранить их значения в одном объекте.
Данные в этом объекте будут читаться как пары ключ-значение , которые в данном случае являются значениями атрибутов name и value. Например: ['1-level', '2'], здесь мы видим ввод с именем '1-level' и значением '2'.
Я бы не рекомендовал использовать другой ввод элементы, чтобы показать ваши результаты или резюме. Это может сбить с толку пользователя, поскольку он предлагает ввод. Вместо этого напечатайте результаты в виде обычного текста или создайте список.
Я не знаю jQuery эквивалента многих из этих API или методов, поэтому я использовал Vanilla JavaScript для создания демонстрации, которая, надеюсь, демонстрирует то, что вы пытаетесь выполнить sh.
Если у вас есть какие-либо вопросы, я был неясен или не помог вам. Пожалуйста, дайте мне знать.
const form = document.getElementById('step-form');
const summary = document.getElementById('step-summary');
const clear = document.getElementById('step-clear');
// Remove all children of the summary list.
function clearSummary() {
while(summary.firstElementChild) {
summary.firstElementChild.remove();
}
}
// Clear list on click.
clear.addEventListener('click', event => {
clearSummary();
});
form.addEventListener('submit', event => {
// Clear list first.
clearSummary();
// Create a fragment to store the list items in.
// Get the data from the form.
const fragment = new DocumentFragment();
const formData = new FormData(event.target);
// Turn each entry into a list item which display
// the name of the input and its value.
// Add each list item to the fragment.
for (const [ name, value ] of formData) {
const listItem = document.createElement('li');
listItem.textContent = `${name}: ${value}`;
fragment.appendChild(listItem);
}
// Add all list items to the summary.
summary.appendChild(fragment);
event.preventDefault();
});
<form id="step-form">
<div class="one">
<input type="radio" id="1-1" name="1-level" value="1">
<label for="1-1">1</label>
<input type="radio" id="1-2" name="1-level" value="2">
<label for="1-2">2</label>
</div>
<div class="two">
<input type="radio" id="2-1" name="2-level" value="1">
<label for="2-1">1</label>
<input type="radio" id="2-2" name="2-level" value="2">
<label for="2-2">2</label>
</div>
<div class="three">
<input type="radio" id="3-1" name="3-level" value="1">
<label for="3-1">1</label>
<input type="radio" id="3-2" name="3-level" value="2">
<label for="3-2">2</label>
</div>
<ul id="step-summary"></ul>
<button type="submit">Review form</button>
<button type="button" id="step-clear">Clear summary</button>
</form>