Как корректно создать скрытые поля input с type hidden?

Question

[Валентин Попов]

Подскажите пожалуйста как мне реализовать поле input с type hidden.
У меня есть блоки которые изначально скрыты, кроме первого. При клике на кнопку next предыдущий блок скрывается, а последующему добавляется класс .active и он отображается.
В каждом таком блоке есть поля input. В каких-то блоках input с типом radio, а в каких-то с типом type="text" или type="checkbox"
Я пытаюсь реализовать так чтобы когда пользователь выбирает одно из полей в активном блоке то его значения value и name летят в созданный динамически input с type="hidden". Поле input type="hidden" создается только после того как пользователь нажал кнопку next.
Проблема в том что при каждом следующем нажатии на кнопку next поле скрытое создается но постоянно добавляется одно и тоже поле которое выбрал пользователь в первом блоке.
Еще не могу понять как реализовать так что если кликаем на кнопку Prev и выбираем другое значение то старое поле скрытое остается, а по идее должно самоуничтожиться и добавиться новое поле.

Вот что у меня пока получилось
https://jsfiddle.net/vbuoyqrt/

Буду очень благодарен если поможете разобраться с данной ситуацией.

Comments

[Сергей Сергей]

Описанное в вопросе очень сильно смахивает на "пошаговые формы" или "quiz". Надо искать библиотеку или руководство по созданию такой формы. И важно то, что тип полей ввода менять не следует, лучше их скрывать стилями, в руководствах это есть.

[Валентин Попов]

Да, я пытаюсь реализовать сбор данных по типу quiz. Так я тип полей не меняю, в каждом контейнере свои поля с типами.
Например в первом контейнере поля с типом radio, а во втором с типом text.

[v3shin]

А зачем вам добавлять hidden? Запихните все в форму.

[Валентин Попов]

v3shin, да не в этом же суть. Я учусь js программированию и хочу понять как именно реализуется то что я описал.

Answer 1

[Aricus]

Не уверен, что понял правильно: не особо вникал. Но почему бы перед созданием поля не проверять его наличие? Примерно так (пишу на jquery, раз вы его выбрали в jsfiddle):

function addInputHidden(input) {
  if ($('[name="' + input.name + '"]').length) {
    $('[name="' + input.name + '"]').val(input.value);
  } else {
    const inputField = document.createElement('input');
    inputField.type = 'hidden';
    inputField.value = input.value;
    inputField.name = input.name;
    form.appendChild(inputField);
  }
}

Comments

[Валентин Попов]

Не понял что вы этим решением хотели показать, но это не работает. Но все равно спасибо за помощь.

[Aricus]

Валентин Попов, Может, где-то ошибся, или задача этим не исчерпывается. Суть в том, что если это поле уже существует, изменить его value. Если не существует - создать.