Passing the values from dynamically created textboxes to an array using JavaScript only
Question
I wanted to add textboxes dynamically and then pass the values written in these textboxes to
an array. here is my code.
function add(type)
{
a=new Array();
for(c=0;c<3;c++)
{
var element = document.createElement("input");
element.setAttribute("type", type);
element.setAttribute("value", type);
element.setAttribute("name", type);
element.setAttribute("id", 'n'+c);
var foo = document.getElementById("fooBar");
a[i]=document.getElementById('n'+c);
foo.appendChild(element);
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<SELECT name="element">
<OPTION value="button">Button</OPTION>
</SELECT>
<INPUT type="button" value="Add" onclick="add(document.forms[0].element.value)"/>
<span id="fooBar"> </span>
thanks....
3 answers
solution1
3 ACCPTED 2013-08-17 10:14:36
Here try this!!!
var a= [];
function add(type) {
for(c=0;c<3;c++){
var element = document.createElement("input");
element.setAttribute("type", type);
element.setAttribute("value", type);
element.setAttribute("name", type);
element.setAttribute("id", 'n'+c);
var foo = document.getElementById("fooBar");
foo.appendChild(element);
a[c]=document.getElementById('n'+c).value;
}
}
function show(){
for(c=0;c<3;c++){
alert(a[c]);
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<SELECT name="element">
<OPTION value="text">Text</OPTION>
</SELECT>
<INPUT type="button" value="Add" onclick="add(document.forms[0].element.value)"/><br>
<INPUT type=button name="b1" value="Show" onclick="show()"/><br>
<span id="fooBar"> </span>
solution2
2 2013-08-17 09:37:01
try this
HTML
<form>
<select name="element">
<option value="button">Button</option>
</select>
<input type="button" value="Add" onclick="add(document.forms[0].element.value)"/>
<span id="fooBar"> </span>
</form>
JS
function add(type)
{
a=new Array();
for(c=0;c<3;c++)
{
var element = document.createElement("input");
element.setAttribute("type", "text");
element.setAttribute("value", type);
element.setAttribute("name", "mytextbox");
element.setAttribute("id", 'n'+c);
var foo = document.getElementById("fooBar");
foo.appendChild(element);
a[c]=document.getElementById('n'+c).value;
}
}
Working JSBin example
solution3
0 2013-08-17 09:20:53
I imagine the problem is that the element isn't part of the document until you call foo.appendChild(element); so doing document.getElementById('n'+c); isn't returning anything. However, that's totally unnecessary anyway. If it were part of the document, document.getElementById('n'+c); is just going to return exactly what you already have referenced by element , so you should be able to just do:
a[c] = element;
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.