kristen10
10-06-2008, 04:56 PM
I have a form that has a dropdown box. Depending on which selection is chosen, I need a related question to be displayed. I have code right now that works, but only for one option. I'll post the code that is currently working below - what I need is to modify that code to allow for more than one "customoption". I think that something about the "(this)" suffix might be in order? I do not know javascript well at all, so I'm sorry if this is not a helpful enough description of my problem, or if it is something totally simple! I've googled for days and can't seem to figure it out. THanks so much!
<script type="text/javascript"><!--
if(document.all && !document.getElementById) { //IE4 support
document.getElementById = function(id) { return document.all[id]; }
}
/*
This works in Firefox, Netscape 6+, IE4+/Win, Opera 7+, Konqueror 3, Safari,
IE5/Mac, and iCab 3.
*/
function customOption(selected) { //selected is the selected option
if(!document.getElementById) return;
// selected's value property is retrieved and converted to lower case to make comparing it to another string simpler
var val = selected.value.toLowerCase();
// gets the object reference for the element
var el = document.getElementById('other1label');
// if val is set to 'customoption' show the textbox
if(val == 'customoption') { el.style.display='block';
// otherwise hide it or keep it hidden.
} else { el.style.display='none'; }
}
function dss_addLoadEvent(fn) {
if(typeof(fn)!="function")return;
var tempFunc=window.onload;
window.onload=function() {
if(typeof(tempFunc)=="function")tempFunc();
fn();
}
}
dss_addLoadEvent(function() {
// we find the form element and the select element and attach the event
// handlers to them
var f = document.form1;
var sel = f.select1;
sel.onchange=function(){customOption(this.options[this.selectedIndex])}
// we call the function when the page loads to hide #other1label initially
sel.onchange();
});
// -->
</script>
<select name="relationship" id="select1">
<option></option>
<option value="customoption">Mother</option>
<option value="customoption">Father</option>
<option value="customoption">Grandparent</option>
<option value="4">Potential Child Care Provider</option>
<option value="5">Child Care Provider</option>
<option value="6">Other</option>
</select>
<div id="other1label">How many children under 5 live in your household? <input type="text" name="children_under_5" id="other1" style="width:45px;" /></div>
<script type="text/javascript"><!--
if(document.all && !document.getElementById) { //IE4 support
document.getElementById = function(id) { return document.all[id]; }
}
/*
This works in Firefox, Netscape 6+, IE4+/Win, Opera 7+, Konqueror 3, Safari,
IE5/Mac, and iCab 3.
*/
function customOption(selected) { //selected is the selected option
if(!document.getElementById) return;
// selected's value property is retrieved and converted to lower case to make comparing it to another string simpler
var val = selected.value.toLowerCase();
// gets the object reference for the element
var el = document.getElementById('other1label');
// if val is set to 'customoption' show the textbox
if(val == 'customoption') { el.style.display='block';
// otherwise hide it or keep it hidden.
} else { el.style.display='none'; }
}
function dss_addLoadEvent(fn) {
if(typeof(fn)!="function")return;
var tempFunc=window.onload;
window.onload=function() {
if(typeof(tempFunc)=="function")tempFunc();
fn();
}
}
dss_addLoadEvent(function() {
// we find the form element and the select element and attach the event
// handlers to them
var f = document.form1;
var sel = f.select1;
sel.onchange=function(){customOption(this.options[this.selectedIndex])}
// we call the function when the page loads to hide #other1label initially
sel.onchange();
});
// -->
</script>
<select name="relationship" id="select1">
<option></option>
<option value="customoption">Mother</option>
<option value="customoption">Father</option>
<option value="customoption">Grandparent</option>
<option value="4">Potential Child Care Provider</option>
<option value="5">Child Care Provider</option>
<option value="6">Other</option>
</select>
<div id="other1label">How many children under 5 live in your household? <input type="text" name="children_under_5" id="other1" style="width:45px;" /></div>