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

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。

样品

 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

现在，如果您在上面的示例中注意到，如果键入然后添加另一个textarea，它将刷新以前的textarea的值。 这是因为您正在设置.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类添加到生成的新文本区域，并使用获取数据

 var x = document.getElementsByClassName("dynamicTxtArea")

我已经将该类添加到正在动态生成的Text区域中。 请检查下面的代码。

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

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

问题描述

2 个解决方案

解决方案1
0 已采纳 2017-03-30 13:32:06

解决方案2
0 2017-03-30 13:33:18

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

问题描述

2 个解决方案

解决方案1 0 已采纳 2017-03-30 13:32:06

解决方案2 0 2017-03-30 13:33:18

解决方案1
0 已采纳 2017-03-30 13:32:06

解决方案2
0 2017-03-30 13:33:18