如何获取动态生成的多个文本框的值？

Question

我有一个名为 'AddTextArea' 的按钮，点击后会出现新的文本区域，但如何才能获得我在新文本区域中输入的值？

我试过这样-

var x= document.getElementById("div_quotes").value;

但它不起作用。请帮助，因为我是 JS 的新手，在此先感谢。

<html>
<head>
    <script type="text/javascript">
        function addTextArea(){
            var div = document.getElementById('div_quotes');
            div.innerHTML += "<textarea name='new_quote[]' />";
            div.innerHTML += "\n<br />";
        }
    </script>
</head>
<body>
  <form method="post">
    <!--<input type="text" name="text_new_author" /><br />-->
    <div id="div_quotes"></div>
    <input type="button" value="Add Text Area" onClick="addTextArea();">
    <input type="submit" name="submitted">
  </form>
</body>
</html>

Answer 1

var x= document.getElementById("div_quotes").value;

以上代码将不起作用，因为 div_quotes 是 div 而 div 没有 value 属性.

您必须在此 div 中搜索文本区域。

样本

function addTextArea() {
  var div = document.getElementById('div_quotes');
  div.innerHTML += "<textarea name='new_quote[]' />";
  div.innerHTML += "\n<br />";
}

function validate(){
  var tas = document.querySelectorAll('#div_quotes  textarea[name="new_quote[]"]')  
  for(var i = 0; i< tas.length; i++){
    console.log(tas[i].value)
  }
}

<form method="post">
  <!--<input type="text" name="text_new_author" /><br />-->
  <div id="div_quotes"></div>
  <input type="button" value="Add Text Area" onClick="addTextArea();">
  <input type="button" name="submitted" onclick="validate()" value="Validate"> 
</form>

版本 2

现在，如果您在上面的示例中注意到，如果您键入然后添加另一个文本区域，它将刷新之前文本区域的值。这是因为，您正在设置 .innerHTML += ...。这将再次破坏并重新创建所有元素。你应该使用 document.createElement

function addTextArea() {
  var div = document.getElementById('div_quotes');
  var wrapper = document.createElement('div')
  var ta = document.createElement('textarea');
  ta.name = "new_quote[]"
  wrapper.append(ta);
  div.append(wrapper)
}

function validate(){
  var tas = document.querySelectorAll('#div_quotes  textarea[name="new_quote[]"]')  
  for(var i = 0; i< tas.length; i++){
    console.log(tas[i].value)
  }
}

<form method="post">
  <!--<input type="text" name="text_new_author" /><br />-->
  <div id="div_quotes"></div>
  <input type="button" value="Add Text Area" onClick="addTextArea();">
  <input type="button" name="submitted" onclick="validate()" value="Validate"> 
</form>

Answer 2

您可以在生成的新文本区域中添加一个CSS Class并使用

获取数据

var x = document.getElementsByClassName("dynamicTxtArea")

我已将 class 添加到动态生成的文本区域。请检查下面的代码。

<html>
<head>
    <script type="text/javascript">
        function addTextArea(){
            div.innerHTML += "<textarea name='new_quote[]' class='dynamicTxtArea'/>";
            div.innerHTML += "\n<br />";
        }
    </script>
</head>
<body>
  <form method="post">
    <!--<input type="text" name="text_new_author" /><br />-->
    <div id="div_quotes"></div>
    <input type="button" value="Add Text Area" onClick="addTextArea();">
    <input type="submit" name="submitted">
  </form>
</body>
</html>

如何获取动态生成的多个文本框的值？

How to get values of multiple textboxes generated dynamically?

javascript