If form option selected show hidden field

gstricklind

01-19-2012, 06:05 PM

I've inherited this piece and now I'm suppose to add to it. Its basic function currently is when the "Other" option is selected, a hidden text field shows. Now, I need to add when "Athletics" is selected, another hidden select group will show.
I've set up the new Select group already, but not sure how to incorporate it into the already existing script. I've been researching for two days, and hopefully this form will be helpful.

<select id="Program" name="Program" size="1" onchange="
$other = document.getElementById('other_program').style;
$invoice = document.getElementById('invoice');
if (selectedIndex==6) {
$other.visibility='visible';
if ($invoice.value == 'General Fund') $invoice.value='';
} else {
$other.visibility='hidden';
if (selectedIndex==1) {
$invoice.value='Renegade Fund';
} else {
$invoice.value='Please Specify';
}
}
">
<option selected="selected" value="Not Selected"> - - Select One - - </option>
<option value="Athletics">Athletics</option>
<option value="Drum Line">Drum Line</option>
<option value="Renegade Fund">Renegade Fund</option>
<option value="General Scholarships">General Scholarships</option>
<option value="President's Circle">President's Circle</option>
<option value="Other">Other</option>
</select>

<span id="other_program"><input type="text" id="invoice" name="invoice" size="15" /></span>

xelawho

01-19-2012, 06:36 PM

I have no idea what's supposed to be going on, or even if the html is legal, but is this what you're looking for?

<html>
<head>
<script type="text/javascript">
function change() {
$other = document.getElementById('other_program').style;
$alum = document.getElementById("alumni").style;
$invoice = document.getElementById('invoice');
sel=document.getElementById('Program')
if (sel.selectedIndex==1) {
$alum.visibility='visible';
}
if (sel.selectedIndex==6) {
$other.visibility='visible';

if ($invoice.value == 'General Fund') $invoice.value='';
} else {
$other.visibility='hidden';
if (sel.selectedIndex==1) {
$invoice.value='Renegade Fund';
} else {
$invoice.value='Please Specify';
$alum.visibility='hidden';
}
}
}

</script>
</head>

<body>
<select id="Program" name="Program" size="1" onchange="change()">
<option selected="selected" value="Not Selected"> - - Select One - - </option>
<option value="Athletics">Athletics</option>
<option value="Drum Line">Drum Line</option>
<option value="Renegade Fund">Renegade Fund</option>
<option value="General Scholarships">General Scholarships</option>
<option value="President's Circle">President's Circle</option>
<option value="Other">Other</option>
</select>

<span id="other_program" style="visibility:hidden"><input type="text" id="invoice" name="invoice" size="15" /></span>

<span id="alumni" style="visibility:hidden">
<select id="select-alumni" name="select-alumni" size="1">
<option selected="selected" value="Not Selected">Yes or No</option>
<option value="Yes-alumni">Yes</option>
<option value="Not-alumni">No</option>
</select>
</span>
</body>
</html>

gstricklind

01-19-2012, 06:49 PM

Awesome, thank you!
I didn't think having the previous script stuffed into the select tag was "good coding". I've been having to wade through some other stuff like that. I'm still a beginner to javascript, I appreciate your help!