Here is a sample of using css to hide text input fields until user selects the number of fields they want, then un-hiding that many fields. Not sure if it works the way you want, but I hope it helps.
<html>
<head>
<script type="text/javascript">
//Returns an element in document with passed id (objectId)
function getStyleObject(objectId) {
if (document.getElementById && document.getElementById(objectId)) {
return document.getElementById(objectId).style;
} else if (document.all && document.all(objectId)) {
return document.all(objectId).style;
} else {
return false;
}
}
//Changes a the_div's display property to the_change (block or none)
function changeDiv(the_div,the_change)
{
var the_style = getStyleObject(the_div);
if (the_style != false)
{
the_style.display = the_change;
}
}
//Hides all the text input fields
function hideAll()
{
for(var i = 1; i < 6; i++)
{
thediv = "div" +i;
changeDiv(thediv, "none");
}
}
//Display selected number of boxes
function openBoxes()
{
hideAll();
var numBoxes = document.form1.numBoxes.value;
var thediv;
for(var i = 1; i <= numBoxes; i++)
{
thediv = "div" +i;
changeDiv(thediv, "block");
}
}
</script>
</head>
<body>
<form name='form1'>
<select name=numBoxes onchange='openBoxes();'>
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select><br />
<div id='div1' style='display: none;'>
Box Number 1: <input type=text name='box1' id='box1' value='box1' /><br />
</div>
<div id='div2' style='display: none;'>
Box Number 2: <input type=text name='box2' id='box2' value='box2' /><br />
</div>
<div id='div3' style='display: none;'>
Box Number 3: <input type=text name='box3' id='box3' value='box3' /><br />
</div>
<div id='div4' style='display: none;'>
Box Number 4: <input type=text name='box4' id='box4' value='box4' /><br />
</div>
<div id='div5' style='display: none;'>
Box Number 5: <input type=text name='box5' id='box5' value='box5' /><br />
</div>
</form>
</body>
</html>
