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

Question

我创建了一个动态创建文本框的函数，我得到了第一个文本框的值，因为它是在我的HTML中创建的......

但我无法从addInput函数中获取任何其他文本框的值。我想在我的addQuestion函数中获取值，就像我对测试用例的做法。

＆＃13;

＆＃13;

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"); */
    }
  }
}

＆＃13;

<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');">

＆＃13;

＆＃13;

＆＃13;

正如您所看到的，＆＃34;案例1和＃34;的值可以发送，但不能发送＆＃34;案例2＆＃34;。任何帮助，将不胜感激。感谢。

Answer 1

您可以使用querySelectorAll选择所有#cases子项的输入：

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

如果要将所有值放入数组并发送它：

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

Answer 2

有一些错误：

您不能拥有多个具有相同ID的元素。在 addInput 函数中，ID os是硬编码的，并且对于添加的所有元素都是相同的：

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

在 addQuestion 功能中，您尝试按ID＆＃39; testecases＆＃39;来获取元素，但新元素有id =＆＃39; case＆＃39;：< / p>

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

要修复错误，请从动态添加的输入中删除ID，并尝试按名称获取元素：

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