Javascript: получить все входные значения формы в виде массива

Question

Я пытаюсь использовать функцию NumberBox onEnter(), чтобы иметь возможность динамически изменять форму FormBox.

Если кто-то вводит 3 в качестве входного значения, мне нужно показать 3 формы с точными полями ввода. Я знаю, как получить значение из поля ввода и показать количество форм ниже.

Моя проблема в том, что я не могу понять, как одна кнопка отправки хранит все значения в массиве, например [[1,1,1,1,1], [2,2,2], 2,2], и т.д.].

Как только я смогу это понять, я смогу вывести эти значения самостоятельно. Конечная цель - использовать эти значения для многократного отображения списка на другой странице. Я бы предпочел сохранить это полностью в Javascript. Я верю, что это можно сделать, но я попал в блок и мне нужна помощь.

function clickMe() {
  var input1 = document.forms["formBox"]["info1"].value;
  var input2 = document.forms["formBox"]["info2"].value;
  var input3 = document.forms["formBox"]["info3"].value;
  var input4 = document.forms["formBox"]["info4"].value;
  var input5 = document.forms["formBox"]["info5"].value;
  var inputArr = [input1,input2,input3,input4,input5];

  document.getElementById("info1").innerHTML = inputArr[0];
  document.getElementById("info2").innerHTML = inputArr[1];
  document.getElementById("info3").innerHTML = inputArr[2];
  document.getElementById("info4").innerHTML = inputArr[3];
  document.getElementById("info5").innerHTML = inputArr[4];
  console.log(inputArr);
}
function onEnter() {
  var qNumber = document.getElementsByName("numberBox")[0].value;
  if(event.keyCode == 13) {
      var qID = document.getElementById("numBox");
      var submitBtn = document.getElementById("submitButton");
      var a = qNumber - 1;
      var b = 0;
      while (b < a) {
          var formClone = document.getElementById("formBox");
          var listClone = formClone.cloneNode(true);
          var text =b+2;
          listClone.id = "formBox" + text;
          console.log(listClone.id);
          document.getElementById("forms").append(listClone);
          b++;
          console.log(b);
      }
      return qID.parentNode.removeChild(qID);
  }
  return qNumber;
}

input{
    display: block;
}

<div id="forms">
    <span id="numBox">
    <label for="numberBox">Number of Forms</label>
    <input type="number" name="numberBox" onkeydown="onEnter()" />
    </span>
    <form id="formBox" name="formBox" action="#" onsubmit="return false;">
        <label for="info1">Input 1:</label>
        <input type="text" name="info1" />
        <label for="info2">Input 2:
        </label>
        <input type="text" name="info2" />
        <label for="info3">Input 3:
        </label>
        <input type="text" name="info3" />
        <label for="info4">Input 4:
        </label>
        <input type="text" name="info4" />
        <label for="info5">Input 5:
        </label>
        <input type="text" name="info5" />
    </form>
</div>
<input type="submit" value="Submit" id="submitButton" onclick="clickMe()" />

<div id="content">
    <span id="info1">input1</span>
    <br/>
    <span id="info2">input2</span>
    <br/>
    <span id="info3">input3</span>
    <br/>
    <span id="info4">input4</span>
    <br/>
    <span id="info5">input5</span>
</div>

Answer 1

Вы можете запросить все входные элементы в форме, сопоставить их значения с другим массивом.

[...document.forms["formBox"].getElementsByTagName("input")].map(input => input.value)

Answer 2

Мне удалось просмотреть все входы, спасибо @ mike-ezzati и @metamorph_online за то, что указали мне правильное направление. Это мой способ сделать это, и я понял, что мне нужно перенести значение из функции onEnter (). Я закончил тем, что использовал localStorage, чтобы сделать это проще всего.

    function clickMe() {
        var q = localStorage.getItem("qNumber");
        console.log(q);
        var inputNow = [];
        var allInputs = [];
        var inputNow = document.getElementsByTagName("input");
        for(x=0; x < inputNow.length; x++) {
            allInputs.push(inputNow[x].value);
             console.log(allInputs);
        }
    localStorage.clear();
    }