How to generate a quantity of Input fields based on value from a drop down list

I’m not expert on HTML/Javascript so I hope someone can help me.

In a JSP form I need to acquire the age of some persons.
I don’t know how many persons there are in advance.

So I need to dinamically generate a quantity of input fields where to put the age of persons based on the value of persons selected from a drop down list.

The quantity of persons is determinated by the value selectd from the drop down list.

For example, if the user select the value “3” from the drop down list, in the JSP form I need to dinamically generate 3 input fields to acquire the age of the 3 persons.
If the user select the value “0” from the drop down list, in the JSP form I don’t need to generate input fields.
The only thing that I think I have to use is “onChange” on the drop down list.

I’ll try to write only plain HTML and Javascript cause I don’t want to get in conflit with jQuery or other libraries.
I’m thinking that using only HTML/Javascript I can get good results too.

At the same time I need to obtain my target without to reload the HTML page.

In my previous days I learned to hide/show an HTML input field – below I show you my code:

[CODE]<select name=”opt” label=”some opts” id=”opts” onchange=”showdv(this,’one’,’two’);” >
<option value=”one” selected=”true”>Option one</option>
<option value=”two” >Option two</option>
</select>[/CODE]

[CODE]<div id=”codFiscaleField” style=”display:none;”>
<input name=”codFiscale” size=”50″></input>
</div>[/CODE]

[CODE]<script>
function showdv(obj,id1,id2) {
txt=obj.options[obj.selectedIndex].text;
document.getElementById(“codFiscaleField”).style.display=’none’;

if (txt.match(id1)) {
document.getElementById(“codFiscaleField”).style.display=’block’;
document.getElementById(“codFiscaleFieldXxx”).value=txt
}

if (txt.match(id2)) {
document.getElementById(“codFiscaleField”).style.display=’block’;
document.getElementById(“codFiscaleFieldXxx”).value=txt
}
}
</script>[/CODE]

In fact when I pick the “Option two” the script shows the input field.

But my final target is different: I need that when the user select the “Option two” (or “Option three” or “Option four” and so on) the HTML shows two Input fields (or three or four Input fields).

The option selected determine the number of Input fields, for example:

User selected “Option three” then the HTML shows three Input fields.
User selected “Option four” then the HTML shows four Input fields.

My final job is: The select determine the number of Persons in the list and I need to get the ages of every Persons.

Thank you for some more help

Ivano C.

Also in #JavaScript _↴