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 3 of 3

Thread: Selected option

  1. #1
    New to the CF scene
    Join Date
    Sep 2011
    Location
    Worcester, Ma
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Selected option

    Hello, I am new with javascript and have been trying all day to figure out how do this problem. I am not sure to use the switch or just if function? Basically I want a drop down to give a list of all ipod nano's and based on what generation is selected I want to display the correct storage space in checkboxes under my selection. I was able to get one option to come and go but after adding more I got lost.



    This is part of the html:
    (I am trying to use the div tag's display to hide and populate the area once its selected)

    Code:
    <form action="#" method="post" enctype="multipart/form-data" name="deviceForm">
    <fieldset>
    
    <legend>Please select your device?</legend>
    <p>
        <label for="nano">Nano</label>
            <select onchange="nanoIpod(this);" name="nanoIpod" class="medium">
          		<option value="nothing"></option>
    	  		<option value="nano1">iPod nano</option>
    	  		<option value="nano2">iPod nano 2nd generation</option>
    	  		<option value="nano3">iPod nano 3rd generation</option>
                <option value="nano4">iPod nano 4th generation</option>
                <option value="nano5">iPod nano 5th generation</option>
                <option value="nano6">iPod nano 6th generation</option>
    	 	</select>
    <div id="nothingDiv" name="nothingDiv" style="display: none">
    		<input name="1GB" type="checkbox" id="1GB" value="" />
            	<label for="1GB">1GB</label>
    		<input name="2GB" type="checkbox" id="2GB" value="" />
            	<label for="2GB">2GB</label>
            <input name="4GB" type="checkbox" id="4GB" value="" />
           	<label for="4GB">4GB</label>
    </div>		
    <div id="nano1Div" name="nano1Div" style="display: none">
    		<input name="4GB" type="checkbox" id="4GB" value="" />
            	<label for="4GB">4GB</label>
    		<input name="8GB" type="checkbox" id="8GB" value="" />
            	<label for="8GB">2GB</label>
            <input name="16GB" type="checkbox" id="16GB" value="" />
           	<label for="16GB">16GB</label>
    </div>		
    <p> 
    </code>
    thanks in advance for your help
    
    
    
    <code>
    function preparepage() {
    	
    	
    	
    	
    	
    
    var ind=document.getElementById("nanoIpod").options[document.getElementById("nanoIpod").selectedIndex].value;
    
    
    function nanoIpod (obj){
    	if(ind=0){
    		document.getElementById("nothingDiv").style.display = 'none';
    						};
    				
    		
    }
    	
    	
     
    
    
    
    }
    
    window.onload = function () {
    		
    	preparepage();
    
    }
    Last edited by WA; 09-23-2011 at 08:14 AM.

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,391
    Thanks
    11
    Thanked 568 Times in 561 Posts
    You don't have any element with id="nanoIpod", yet to try to address it using getElementById('nanoIpod'). This will definitely fail. So it's time to debug :-)

    1. Add an id attribute to the select (let's say "select1")
    2. document.getElementById('select1').value will give you the currently selected value of the select inside your onchange handler
    3. Depending on the value you can show/hide the depending div's

    If you need more info, feel free to ask. Please add your updated code then.

  • #3
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Code:
    <select onchange="nanoIpod(this);" name="nanoIpod" class="medium">
    Your element has a name="nanoIpod", not an id, thus you can not use the method document.getElementById() unless you give it also an id. Take care, unlike the token name, the id must be unique on document.

    Another thing: Don't name you functions same as other global variables or as other id or name attributes.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Tags for this Thread

    Posting Permissions

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