creating text boxes dynamically using javascript

[claireneedshelp]

As part of my form I have a box for the user to input the number of text boxes needed. I already have the page creating the textboxes but do not know the IDs of each text box.
Once the user adds textboxes they can click add again to create more. If the user previously added 3 textboxes and now enters 4 I want the program to just add one more instead of 4 more.

The function I am using is:

function add(type) {
var num=(document.getElementById('NoOfValues').value)-0;
for (i=1;i<=num;i=i+1)
{
//Create an input type dynamically.
var element = document.createElement("input");
//Assign different attributes to the element.
element.setAttribute("type", type+i);
element.setAttribute("name", type+i);
var foo = document.getElementById("fooBar");
//Append the element in page (in span).
newline=document.createElement("br");
foo.appendChild(newline);
foo.appendChild(element);
}
}

(NoOfValues is the text box that the user inserts how many textboxes they want added)

This is where I call the function:

<span id="fooBar"><input onclick="add('Textbox')" type="button" value="Add" style="visibility:hidden" name="cmdAddValues"/></span>


Im wondering:
1. what the IDs of the new textboxes are?
and
2. how to check if textboxes have already been added so that extras arent added....(e.g. the user adds 3 and then types in 4 and clicks add.....in total I only want 4 textboxes and not 7)

any help on this is really appreciated!

[Fang]

1. The textboxes don't have an id only a name. Where or how do you want to reference it's name?

2. Get the number of inputs in #foo

var inputs = foo.getElementsByTagName('input').length

[claireneedshelp]

Thanks Fang,

1. I will at a later point need to get the value from each box but I guess I can do that with the name instead of ID.

2. will:
var inputs = foo.getElementsByTagName('input').length
tell me how many text boxes I have previously added?

The method I was thinking of was:
-the user has already added 3 text boxes (names: textbox1, textbox2 and textbox3)
-the user then selects to insert 4 textboxes
-I was going to write a loop from i=1 to 4, if textbox +i exists then dont add a new text box, if it doesnt exist then add new textbox +i
-This would then end up with only 4 textboxes and not 7 which is what I want

Am I trying to do this a long way.....is there a quicker/better way to do this?

Thanks

Claire

[Fang]

var inputs will give the number of inputs, just check for the maximum allowed.
Note that hidden inputs will also be counted.

[claireneedshelp]

will var inputs give the number of inputs in total on the entire page because there are other inputs on the page too that i do not want to take into account in this bit of the code.

[Fang]

Only the ones in #fooBar

[claireneedshelp]

This line of code works at the end of the function (after textboxes have been added) but if I put it at the top of the function where I want to check if textboxes exist it doesnt work.

I have tried this at the top and bottom of the function, it works fine at the bottom of the function but nothing happens when it is at the top of the function.
var inputs = foo.getElementsByTagName('input').length
alert ('inputs: '+inputs);


I know that at the point at the top of the function, when it is first run that no text boxes have been created. I want to check at the top of the function if this value is >0 (if textboxes have already been created) but when no textboxes have previously been created it doesnt give any value at all...just exits the function.


Also, when I add 3 textboxes the value from:
var inputs = foo.getElementsByTagName('input').length
is 4. It gives the value of the added textboxes plus one all the time, is this correct?

[Fang]

The extra 1 is the hidden input

[claireneedshelp]

ok but I still want to check how many inputs there are at the beginning of the function. So the first time this is run there will be no inputs. How do I get around this?

[Kor]

if(foo.getElementsByTagName('input')[0]){
//...
}

That will check if there is at least one input element.

[claireneedshelp]

below is the code for my function now:

function add(type) {
var num=(document.getElementById('NoOfValues').value)-0;
if(foo.getElementsByTagName('input')[0]){
alert('theres at least one');
}else{
alert('there arent any inputs');
}
for (i=1;i<=num;i=i+1)
{
var TextBoxToCheck='Textbox'+i
var element = document.createElement("input");
//Assign different attributes to the element.
element.setAttribute("type", type+i);
element.setAttribute("value", type+i);
element.setAttribute("name", type+i);
var foo = document.getElementById("fooBar");
//Append the element in page (in span).
newline=document.createElement("br");
foo.appendChild(newline);
foo.appendChild(element);
}
var inputs = foo.getElementsByTagName('input').length
alert ('inputs: '+inputs);
}

i put in the if statement at the beginning to check it works but when it is run, nothing happens?

[Fang]

function add(type) {
var num=(document.getElementById('NoOfValues').value)-0;
var foo = document.getElementById("fooBar");
if(foo.getElementsByTagName('input').length>=1){
alert('theres at least one');// always true as the hidden input is counted
}else{
alert('there arent any inputs');
}
for (i=1;i<=num;i=i+1)
{
var TextBoxToCheck='Textbox'+i
var element = document.createElement("input");
//Assign different attributes to the element.
element.setAttribute("type", type+i);
element.setAttribute("value", type+i);
element.setAttribute("name", type+i);

//Append the element in page (in span).
newline=document.createElement("br");
foo.appendChild(newline);
foo.appendChild(element);
} 
var inputs = foo.getElementsByTagName('input').length
alert ('inputs: '+inputs);
}

[claireneedshelp]

amazing...thank you so much, works perfectly