...

View Full Version : Display followup questions based on selection in dropdown



kristen10
10-06-2008, 05: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>

ubh
10-06-2008, 10:55 PM
Something like this?



<script type="text/javascript">
function turnThemOff()
{
var getq1 = document.getElementById("q1").style.display="none";
var getq2 = document.getElementById("q2").style.display="none";
var getq3 = document.getElementById("q3").style.display="none";
var getq4 = document.getElementById("q4").style.display="none";
var getq5 = document.getElementById("q5").style.display="none";
var getq6 = document.getElementById("q6").style.display="none";
}

function testValue(selection) {
if (selection.value == "Mother") {
turnThemOff();
var getq1 = document.getElementById("q1").style.display="block";
}

else if (selection.value == "Father") {
turnThemOff();
var getq2 = document.getElementById("q2").style.display="block";
}

else if (selection.value == "Grandparent") {
turnThemOff();
var getq3 = document.getElementById("q3").style.display="block";
}

else if (selection.value == "Potential Child Care Provider") {
turnThemOff();
var getq4 = document.getElementById("q4").style.display="block";
}

else if (selection.value == "Child Care Provider") {
turnThemOff();
var getq5 = document.getElementById("q5").style.display="block";
}

else if (selection.value == "Other") {
turnThemOff();
var getq6 = document.getElementById("q6").style.display="block";
}
else {
<!-- IF THE EMPTY OPTION IS SELECTED THEN TURN ALL QUESTIONS OFF -->
turnThemOff();
}
}
</script>




<select onchange="testValue(this);">
<option></option>
<option value="Mother">Mother</option>
<option value="Father">Father</option>
<option value="Grandparent">Grandparent</option>
<option value="Potential Child Care Provider">Potential Child Care Provider</option>
<option value="Child Care Provider">Child Care Provider</option>
<option value="Other">Other</option>
</select>



<div id="q1" style="display:none;">Mother Question</div>
<div id="q2" style="display:none;">Father Question</div>
<div id="q3" style="display:none;">Grandparent Question</div>
<div id="q4" style="display:none;">Potential_care Question</div>
<div id="q5" style="display:none;">Care Provider Question</div>
<div id="q6" style="display:none;">Other Question</div>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum