FormBox onEnter()를 동적으로 변경할 수 있도록 NumberBox의 기능을 사용 하려고합니다 .
누군가 입력 값으로 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>양식 내의 모든 입력 요소를 쿼리하고 해당 값을 다른 배열에 매핑 할 수 있습니다.
[...document.forms["formBox"].getElementsByTagName("input")].map(input => input.value)
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다