Question

我正在构建一个动态表单。我们的想法是，您可以按一个按钮添加新的输入字段，用字符串数据填充它们，当您单击提交时，它会以正确的格式创建一个包含此数据的div。

我已经完成了大部分工作，但我遇到的问题是只识别第一个输入字段，而JS创建的任何新文本字段都没有。

问题是我正在通过ID查找输入的值，但我不确定新创建的输入的ID是什么，因此我无法获取它。

I've setup a JSFiddle with my prototype，但如果我保存文件并在浏览器中打开它，即使它正常工作，它也无法正常工作。

以下是代码：

    <!DOCTYPE html>
<html>
<head>
<title>Test</title>

<style>
.HiddenDiv{
color: red;
}
</style>

<script>
//-----CREATES NEW INPUT LINE-----
var counter1 = 1;
var limit1 = 5;

function addInput(divName){
     if (counter1 == limit1)  {
          alert("You have reached the limit of adding " + counter1 + " inputs");
     }
     else {
          var newdiv = document.createElement('div');
          newdiv.innerHTML = "<input type='text' name='myInputs[]'>";
          document.getElementById(divName).appendChild(newdiv);
          counter1++;
     }
}
//-----TAKES VALUE AND PRINTS IT ON DIV-----
var counter2 = 0; //Prevents user from creating multiple nodes on submit
var limit2 = 1; //Amount of nodes that can be created per input field

function createNode(){
if (counter2 == limit2)  {
//Do nothing
}
else {
var input = document.getElementById('textInput1').value; //Retrieves input
var newText = document.createElement("li"); //Creates the HTML node
newText.innerHTML = input; //Sets the node's value to whatever is in the input

document.getElementById("Form").appendChild(newText); //Adds the node to the div

counter2++;
}
}
</script>
</head>

<body>
<div id="dynamicInput">
Job Requirements<br>
<input type="text" name="myInputs[]" id="textInput1">
</div>
<form method="POST">
<input type="button" value="+" onClick="addInput('dynamicInput');">
<input type="button" value="Submit" onClick="return createNode()">
</form>

<div id="Form" class="HiddenDiv">
</div>
</body>
</html>

Answer 1

我认为使用document.querySelectorAll会更容易：

var inputs = document.querySelectorAll('input[name="myInputs[]"');

然后您可以从循环中的输入中获取内容。

JS：如何为新创建的HTML元素分配ID

1 个答案: