Javascript：以數組形式獲取所有表單輸入值

Question

我試圖讓 NumberBox 的onEnter() function 能夠動態更改表單框。

如果有人輸入 3 作為輸入值，我需要它顯示 3 forms 和確切的輸入框。 我知道如何從輸入框中獲取值並在下面顯示 forms 的數量。

我的問題是我無法弄清楚如何讓一個提交按鈕將所有值存儲到一個數組中，例如 [[1,1,1,1,1],[2,2,2,2,2], ETC]。

一旦我弄清楚這一點，我應該能夠自己 output 這些值。 最終目標是使用這些值在另一個頁面上多次顯示列表。 我寧願把它完全保留在 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

您可以查詢表單中的所有輸入元素，map 他們的值到另一個數組。

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

Answer 2

我能夠遍歷所有輸入，感謝@mike-ezzati 和@metamorph_online 為我指明了正確的方向。 這是我這樣做的方式，我意識到我需要從 onEnter() function 中獲取值。 我最終使用 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();
    }