How to get values of multiple textboxes generated dynamically?
Question
I have a button called 'AddTextArea', on clicking, I get new text area, but how can I get the values that I have entered in the new text areas?
I tried like this-
var x= document.getElementById("div_quotes").value;
but it's not working. Please help, as I am new to JS, thanks in advance.
<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>
2 answers
solution1
0 ACCPTED 2017-03-30 13:32:06
var x= document.getElementById("div_quotes").value;
Above code will not work as div_quotes is a div and div do not have value property.
You will have to search for textareas in this div.
Sample
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>
Version 2
Now if you notice in above sample, if you type and then add another textarea, it will flush value of previous ones. This is because, you are setting .innerHTML += ... . This will destroy and recreate all elements again. You should use 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>
solution2
0 2017-03-30 13:33:18
You can add a CSS Class to the new text area that is generated and get the data using
var x = document.getElementsByClassName("dynamicTxtArea")
I have added the class to the Text area that is being dynamically generated. Please check the code below.
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.