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中搜索textareas。

<强>示例

＆＃13;

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)
  }
}

＆＃13;

<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>

＆＃13;

版本2

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

＆＃13;

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)
  }
}

＆＃13;

<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>

＆＃13;

Answer 2

您可以将CSS类添加到生成的新文本区域，并使用

获取数据

＆＃13;

var x = document.getElementsByClassName("dynamicTxtArea")

＆＃13;

我已将该类添加到动态生成的Text区域。请检查以下代码。

＆＃13;

<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>

＆＃13;

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

2 个答案: