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"> London Postcode<br>
<input type="radio" name="chooseList" value="C2"> Outside London<br>
<input type="radio" name="chooseList" value="C3"> Airport / Seaport<br>
<input type="radio" name="chooseList" value="C4"> Popular Destination
</p>
<SELECT class="droppy" NAME="D1" id="theList">
<option>...
</SELECT>
</form>
</BODY>
</HTML>
