Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Display followup questions based on selection in dropdown

    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!

    Code:
    <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>
    Code:
    <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>

  • #2
    ubh
    ubh is offline
    Regular Coder ubh's Avatar
    Join Date
    Apr 2008
    Location
    Portland, Oregon U.S.A.
    Posts
    443
    Thanks
    108
    Thanked 15 Times in 14 Posts
    Something like this?

    Code:
    <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>
    Code:
    <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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •