Change visibility property with pulldown selection in form

Forum Moderators: open

Message Too Old, No Replies

Change visibility property with pulldown selection in form

conditionally need to hide asterisk (required) from text

timware

7:32 am on Dec 28, 2005 (gmt 0)

I have a form which has asterisks next to fields that are required. The State field is required but only if the user chooses USA or Canada from the country pulldown.

I would like the asterisk next to the State field to be hidden if the user chooses a country other than USA or Canada in the country pulldown.

Can this be done without somehow refreshing the browser which obviously won't work?

Thanks. Tim

ajkimoto

2:53 pm on Dec 30, 2005 (gmt 0)

Hi timware,

How about something like this. The onchange event of the selCountry select object fires the setStateReq function, which shows/hides the asterisk which is in the span myspan based upon the currently selected option of selCountry.

I assume that you have some code already to handle required field validation.

//this function shows/hides an asterisk span indicating required zip field
//and accepts a reference to the select object as a parameter
function setStateReq(obj){

//create a locally scoped variable to hold the currently selected option
var curCountry=obj.options[obj.selectedIndex].value

//if country is USA or Canada, show the asterisk span
if (curCountry=='USA' ŚŚ curCountry=='Canada'){
document.getElementById('myspan').style.display='inline'

//otherwise hide the asterisk span
}else{
document.getElementById('myspan').style.display='none'
}
}
//-->
</script>

</style>

</head>

<body>
Country<select name="selCountry" id="selCountry" onchange="setStateReq(this)"><option value="USA">USA</option><option value="Canada">Canada</option><option value="Slobovia">Slobovia</option></select><br />
Zip/Postal Code <input type="text" size="15" id="txtZip" /><span id="myspan">*</span>
</body>

</html>

Hope this helps,

ajkimoto