Как вывести текст, вводимый в поля, если количество полей изначально неизвестно?

Question

[DanGire]

В HTML при нажатии по кнопке добавляется новый блок с полем для ввода примерно такого вида:

<div>
Имя:
<input name="name1">
</div>

Номер у name для каждого нового поля увеличивается (name2, name3, ...), т.е.

<div>
  Имя:
  <input name="name1">
</div>
<div>
  Имя:
  <input name="name2">
</div>

После добавления нужного количества полей и их заполнения по нажатию на кнопку должен происходить вывод всех введенных значений.

Если количество полей известно (например 2), то вывожу с помощью функции примерно таким образом (Sel1 - из формы, в которой находятся инпуты <form name="Sel1">):

function Complete()
{
   var Elem = "Имя: " + document.Sel1.name1.value + ";\nИмя: " + document.Sel1.name2.value + ";";
   alert(Elem);
}

Ну и собственно вопрос - как можно реализовать вывод всех значений, введенных в поля, если количество полей, которое будет добавлено, изначально неизвестно?

Или может быть есть способ значение переменной добавить в конструкцию document.Sel1.переменная.value (т.е., например, если n = name1, то это "name1" добавить в document.Sel1.name1.value, чтобы затем было document.Sel1.name2.value и так далее). Ну или что-то вроде этого.

Хотя бы в какую сторону гуглить?

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

Comments

[Вадим]

Ну есть 2 основных варианта, по сути очень похожи.
1) если все инпуты в форме, то у формы есть свойствр-массив elements в котором все контролы
2) Можно задавать всем инпутам один класс и через их родителя их перебирать. Например,

parentElement.querySelectorAll('.my-input').forEach

...

[DanGire]

Вадим, спасибо, то, что нужно. Всё получилось.

Answer 1

[wonderingpeanut]

document.querySelectorAll

Находит все элементы с указанным селектором. Например

const inputs = document.querySelectorAll('.input-box input'); // находим все элементы input, у которого папа имеет класс input-box
const values = [];
inputs.forEach(input => {
  values.push(input.value) // пушим значение каждого инпута в массив valeus
});

Comments

[DanGire]

Спасибо, то, что нужно. Всё получилось.