Rob321
02-05-2008, 08:49 PM
Hi everyone,
I have been working on a script that dynamically generates a pair of textboxes then assigns the user's input from each text box "a" into array "a" and the inputs from each text box "b" into array "b".
With my limited knowledge of javascript, I managed to use div tags to create the pairs of text boxes when the user clicks on "add pair" and I named each text box in the form a[ i ] and b[ i ], where i is intially zero and increases by one each time a pair of textboxes is added.
But whenever, I tried to obtain the value of, say, b[2] there was an error that said b[2] was null or not an object. It looks like arrays "a" and "b" were not being formed.
What the function test() was supposed to do was assign the input into the two arrays using the for loop I mentioned and show you the various index and array values as it assigns them. The plus sign just acts as a separator. I've never used "getElementById" before but that method seems to ignore the for loop and only gets elements from the first pair of text boxes. If it did work and you were to generate 3 pair of text boxes and not change the preset values, the output on clicking "test" should look like:
i=2 j=0 a=1 b=2 <--- It stops at this point for some reason
i=2 j=1 a=1,1 b=2,2
i=2 j=2 a=1,1,1 b=2,2,2
(You should note that i = [no. of pairs], "j" is the increment in the for loop and a & b are the growng arrays.) (Thanks for reading this far :) )
I have included a sample of the code below if anyone wants to take a look at it, I would appreciate any advice.
Cheers,
Rob
<html>
<head>
<script>
<!--
var a = [];
var b = [];
var i = 0;
//adds pair of text boxes a[i] and b[i] in the div tags called div
function addPair() {
var c=document.getElementById("div");
c.innerHTML+="+ <input type='text' value='1' size=1 name='a[" + i + "]' id='a[" + i + "]'>";
c.innerHTML+=" and <input type='text' value='2' size=1 name='b[" + i + "]' id='b[" + i + "]'> ";
i++;
}
//tries to make the arrays that i thought would have formed above
function test() {
for (j=0;j<=(i-1);j++)
{
a[j]=document.getElementById("a["+j+"]").value
b[j]=document.getElementById("b["+j+"]").value
document.write("i=" + i + " j=" + j + " a=" + a + " b=" + b + "<br>")
}
}
// -->
</SCRIPT>
</head>
<body>
<form>
<div id="div"></div><input type="button" value="Add pair" onclick="addPair()"/>
<INPUT TYPE="button" VALUE="Test" onClick="test()">
</form>
</body>
</html>
I have been working on a script that dynamically generates a pair of textboxes then assigns the user's input from each text box "a" into array "a" and the inputs from each text box "b" into array "b".
With my limited knowledge of javascript, I managed to use div tags to create the pairs of text boxes when the user clicks on "add pair" and I named each text box in the form a[ i ] and b[ i ], where i is intially zero and increases by one each time a pair of textboxes is added.
But whenever, I tried to obtain the value of, say, b[2] there was an error that said b[2] was null or not an object. It looks like arrays "a" and "b" were not being formed.
What the function test() was supposed to do was assign the input into the two arrays using the for loop I mentioned and show you the various index and array values as it assigns them. The plus sign just acts as a separator. I've never used "getElementById" before but that method seems to ignore the for loop and only gets elements from the first pair of text boxes. If it did work and you were to generate 3 pair of text boxes and not change the preset values, the output on clicking "test" should look like:
i=2 j=0 a=1 b=2 <--- It stops at this point for some reason
i=2 j=1 a=1,1 b=2,2
i=2 j=2 a=1,1,1 b=2,2,2
(You should note that i = [no. of pairs], "j" is the increment in the for loop and a & b are the growng arrays.) (Thanks for reading this far :) )
I have included a sample of the code below if anyone wants to take a look at it, I would appreciate any advice.
Cheers,
Rob
<html>
<head>
<script>
<!--
var a = [];
var b = [];
var i = 0;
//adds pair of text boxes a[i] and b[i] in the div tags called div
function addPair() {
var c=document.getElementById("div");
c.innerHTML+="+ <input type='text' value='1' size=1 name='a[" + i + "]' id='a[" + i + "]'>";
c.innerHTML+=" and <input type='text' value='2' size=1 name='b[" + i + "]' id='b[" + i + "]'> ";
i++;
}
//tries to make the arrays that i thought would have formed above
function test() {
for (j=0;j<=(i-1);j++)
{
a[j]=document.getElementById("a["+j+"]").value
b[j]=document.getElementById("b["+j+"]").value
document.write("i=" + i + " j=" + j + " a=" + a + " b=" + b + "<br>")
}
}
// -->
</SCRIPT>
</head>
<body>
<form>
<div id="div"></div><input type="button" value="Add pair" onclick="addPair()"/>
<INPUT TYPE="button" VALUE="Test" onClick="test()">
</form>
</body>
</html>