...

View Full Version : If form option selected show hidden field



gstricklind
01-19-2012, 07: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>

<!-- the following is the new select group ive set up
<span id="alumni">
<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>
-->

xelawho
01-19-2012, 07: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, 07: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!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum