Какой оптимальный вариант вставки значений в форму?

Question

[godsplan]

Здравствуйте. Иногда встречается такая задача:
Есть страница, на ней есть селекты, чекбоксы, поля и тд, не связанные с формой.
Внизу этих полей допустим есть кнопка "заказать" при клике на котороую открывается попап с двумя полями не связанными с предыдущими и кнопка "отправить".
Соотсвенно при открытии этого поп-апа все значения выбранные в селектах, чекбоксахя, полях должны подставится в форму этого попапа.
Раньше я просо создавал скрытые инпуты и через js по очереди подставлял значения в скрытые инпуты.
Но у меня это выглядело как то так:
input1.value = elem1.value
input2.value = elem2.value
....

Мне не нравится повторение этих участков да и в принципе решение.
Какое оптимальное решение посоветуете и какие вообще бест практики?
Может быть можно создать как то две формы и потом все Data передать во вторую форму?

Answer 1

[ildar-meyker]

Ну если это какой-то обычный проект не на React или т.п., то ваше решение вполне себе годное и типичное. Если полей много, ну в целом это можно сделать так:

const form1 = document.getElementById('form-1');
const form2 = document.getElementById('form-2');

const formData = new FormData(form1);
for (const [key, value] of formData) {
  form2.querySelector(`[name="${key}"]`).value = value;
}

+ правки для чекбоксов там и прочего, что требуется.

Comments

[godsplan]

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