如何获取动态文本框输入的值

Question

I created a function that dynamically creates textboxes, and I am getting the value of the first textbox because it's created in my HTML...

but I can't get the values of any other textboxes from my addInput function. I would like to get the value in my addQuestion function like how I did for the testcases .

 function addInput(divID) { if (counter == limit) { alert("You have reached the limit of adding " + counter + " inputs"); } else { var newdiv = document.createElement('div'); newdiv.innerHTML = "Case " + (counter + 1) + " <br><input type='text' name='myInputs[]' id='case'>"; document.getElementById(divID).appendChild(newdiv); counter++; } } function addQuestion() { var request = new XMLHttpRequest(); var testcases = document.getElementById("testcases").value; var myJSONObject = { "testcases": testcases }; console.log(JSON.stringify(myJSONObject)); request.open("POST", "createQuestion_middle.php", true); request.send(JSON.stringify(myJSONObject)); request.onreadystatechange = function() { if (request.readyState == 4 && request.status == 200) { var return_data = request.responseText; console.log(return_data); /* window.location.assign("insFront.php"); */ } } } 

 <div id="cases"> Case 1<br><input type="text" id="testcases" name="myInputs[]"> </div> <input type="button" value="Add another test case" onClick="addInput('cases');"> 

As you can see, the value for "Case 1" can send, but not for "Case 2". Any help would be appreciated. Thanks.

Answer 1

You can select all inputs that are children of #cases with querySelectorAll:

const inputs = document.querySelectorAll('#cases > input')
console.log(inputs[0].value);
console.log(inputs[1].value);

If you want to put all values into an array and send it:

const inputValues = [...inputs].map(input => input.value);
// ...
const myJSONObject = { testcases: inputValues };

Answer 2

There are some erros:

You cannot have more than one element with same ID . In addInput function, the ID os hard-coded, and will be the same for all elements added:

<input type='text' name='myInputs[]' id='case'>

In addQuestion function, you're trying to get element by ID 'testecases', but new elements have id='case':

var testcases = document.getElementById("testcases").value

To fix the errors, remove ID from dynamically added inputs, and try to get elements by name:

var testcases = document.getElementsByName("myInputs[]")