SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    radio button interfering with drop down

    hi.. my problem is my first two radio buttons are intefering with my drop down menu..

    how can i edit this code to make sure only the 4 choices populate the drop down..

    here is the page..http://www.londonheathrowcars.com/dsf.html

    and the code
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <script type="text/javascript">
    // an array to hold the contents of all lists
    var lists = [
    	["C1","WC1"],
    	["C1","WC2"],
    	["C2","Brighton"],
    	["C2","Liverpool"],
    	["C3","Dover"],
    	["C3","Southampton"],
    	["C4","Trafalgar Square"],
    	["C4","Buckingham Palace"]
    ];
    
    // onclick handler for radio buttons
    function switchList() {
    	
    	var listId = this.value;	
    
    	// get rid of current items in list
    	var list = document.getElementById("theList");
    	while (list.options.length > 0) {
    		list.removeChild(list.options[0]);
    	}
    	
    	var opt = new Option();
    	opt.text = "Please select..";
    	opt.selected = true;
    	list.options.add(opt);
    	
    	for (var i=0; i < lists.length; i++) {
    		if (lists[i][0] == listId) {
    			var opt = new Option();
    			opt.value = lists[i][1];
    			opt.text = lists[i][1];
    			list.options.add(opt);
    		}
    	}
    }
    
    // add onclick handler to radio buttons
    window.onload = function () {
    	var inps = document.getElementsByTagName("input");
    	for (var i=0; i < inps.length; i++) {
    		if (inps[i].type.toLowerCase()== "radio") {
    			inps[i].onclick = switchList;
    		}
    	}
    }
    
    
    </script>
    </HEAD>
    
    <BODY>
    <form>
    <p><input style="margin-left:0px;" type="radio" VALUE="V1" name="way" onMouseOver="style.cursor='pointer'"><b>FROM</b> Heathrow Airport</p>
    
    <p><input style="margin-left:0px;" type="radio" VALUE="V2" name="way" onMouseOver="style.cursor='pointer'"><b>TO</b> Heathrow Airport</p>
    
    <p>
    	<input type="radio" name="chooseList" value="C1">&nbsp;&nbsp;London Postcode<br>
    	<input type="radio" name="chooseList" value="C2">&nbsp;&nbsp;Outside London<br>
    	<input type="radio" name="chooseList" value="C3">&nbsp;&nbsp;Airport / Seaport<br>
    	<input type="radio" name="chooseList" value="C4">&nbsp;&nbsp;Popular Destination
    </p>
    
    <SELECT class="droppy" NAME="D1" id="theList">
    <option>...
    
    </SELECT>
    </form>
    
    </BODY>
    </HTML>
    Last edited by antonyx; Apr 26, 2007 at 16:35.

  2. #2
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ive edited my request and removed the uneccessary coding.. i await ur wisdom


Bookmarks

Posting Permissions

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