Onchange event - newbie

onchange to make fields visible?

[rharcott]

I have a form that I would like to make a little more interactive.

There is a field that I would would like to appear only if a user selects an option from a drop down list.

IE:
I have a "number of cats" field with a list that has 1, 2 and 3 in it.

the first fields - cat1 sex, cat1 type, cat1 age are visible already.
But if the user selects 2 I would like the fields for
cat2 sex, cat2 type, cat2 age to become visible and the same for the number 3.

All this without losing the values in the fields that have already been filled out.

First - is this possible? and second -- is there any sample code? I've only been able to find code that takes you to a different URL onchange.

Thanks in advance

[andreew]

Yes there is a way to do what you want. Here is some sample code that should do what you want.

<SELECT id="catselection"
onChange="showlayer(this.options[selectIndex].value)"> //the onChange will exectue what's in quotes each time the user selects an option from the drop down box. In this case it will call the funciton showlayer. The (this.options[selectedIndex].value passes the value of the currently selected option to the function.
<OPTION value="cat1">cat1</OPTION>
<OPTION value="cat2">cat2</OPTION>
<OPTION value="cat3">cat3</OPTION>
</SELECT>

<input type="typeofinput" name="cat1" style="display:none">//the name is a unique identifer that allows javascript to idenify the object so that it can perform actions to it.
<input type="typeofinput" name="cat2" sytle="display:none">
<input type="typeofinput" name="cat3" sytle="display:none">

function showlayer(elementid){

document.getElementById(elementid).style.display="";//looks for the style and display settings of object whose name matches the value you passed to the function and unhides it.

}