hello all.
i have some code that was mostly written for me. if you visit the following:
http://www.londonheathrowcars.com/robin/index_test.asp"]test page[/URL]
when you choose an option in the first drop down (top of the page), the second drop down updates..
i would like to apply the same functionality to the radio buttons in the second form.
could someone assist me in editing this code so the radio buttons do exactly as the top drop down does (i shall no longer be using 2 drop downs but would like to keep the optgroup system with radio buttons)
many thanks, here is the page code
i have some code that was mostly written for me. if you visit the following:
http://www.londonheathrowcars.com/robin/index_test.asp"]test page[/URL]
when you choose an option in the first drop down (top of the page), the second drop down updates..
i would like to apply the same functionality to the radio buttons in the second form.
could someone assist me in editing this code so the radio buttons do exactly as the top drop down does (i shall no longer be using 2 drop downs but would like to keep the optgroup system with radio buttons)
many thanks, here is the page code
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<script type="text/javascript">
function initSelects() {
var selectdiv = $("selectarea");
var masterlist = $("master");
var opt = null;
var i = 0;
if (masterlist && selectdiv) {
var parentHeader = document.createElement("p");
var parentList = document.createElement("select");
var childHeader = document.createElement("p");
var childList = document.createElement("select");
var linebr = document.createElement("br");
var groups = $els("optgroup", masterlist);
opt = new Option("..", "0");
parentList.options[parentList.options.length] = opt;
for (i = 0; groups[i]; i++) {
var groupname = groups[i].label;
opt = new Option(groupname, groupname);
parentList.options[parentList.options.length] = opt;
}
parentList.onchange = parentListChanged;
parentList.childSelect = childList;
parentList.className = "quote_dropdown";
parentHeader.className = "quote_text";
parentHeader.innerHTML = "Search by..";
selectdiv.appendChild(parentHeader);
selectdiv.appendChild(parentList);
childHeader.className = "quote_text";
childHeader.innerHTML = "Choose a location:";
// - line break not required if we insert a p tag
//selectdiv.appendChild(linebr);
selectdiv.appendChild(childHeader);
childList.className = "quote_dropdown";
childList.onchange = childListChanged;
selectdiv.appendChild(childList);
masterlist.className = "invisible";
}
}
function parentListChanged() {
var masterlist = $("master");
var childList = this.childSelect;
var i = 0;
var j = 0;
childList.options.length = 0;
opt = new Option("...", "0");
childList.options[childList.options.length] = opt;
if (this.selectedIndex > 0) {
//find the optgroup with this label
var groups = $els("optgroup", masterlist);
for (i = 0; groups[i]; i++) {
var groupname = groups[i].label;
if (groupname === this.options[this.selectedIndex].value) {
masterlist.selectIndex = i;
var groupitems = $els("option", groups[i]);
for (j = 0; groupitems[j]; j++) {
var groupitem = groupitems[j];
var opt = new Option(groupitem.text, groupitem.value);
childList.options[childList.options.length] = opt;
}
}
}
}
}
function childListChanged() {
var masterlist = $("master");
masterlist.selectedIndex = findByValue(masterlist, this.options[this.selectedIndex].value);
}
addLoadEvent(initSelects);
//adds an event to be run when the page has loaded
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
//utility function to get an element by id
function $(elementID) {
return document.getElementById(elementID);
}
//utility function to get elements by tagname within the document or an element
function $els(tagName, parentElement) {
if (parentElement) {
return parentElement.getElementsByTagName(tagName);
} else {
return document.getElementsByTagName(tagName);
}
}
function findByValue(obj, value) {
//this function takes a select element and a text value to
//find the index of the option with the same value
var idx = -1;
var i = 0;
for (i=0;i<obj.options.length;i++) {
if (obj.options[i].value == value) {
idx = i;
break;
}
}
return idx;
}
function childListChanged() {
if (this.selectedIndex > 0) {
var masterlist = $("master");
masterlist.selectedIndex = findByValue(masterlist, this.options[this.selectedIndex].value);
$("form1").submit();
}
}
</script>
<!--[if IE ]>
<style type="text/css">
.lcol,.rcol{
}
</style>
<![endif]-->
</head>
<body>
<form method="post" action="quote-redirect.asp" name="form1" id="form1" style="margin:0px;padding:0px;">
<div id="selectarea">
<select name="master" id="master" style="position:absolute;top:-999em;left:-999em;">
<optgroup label="Postcodes"><option value="page1">A1</option><option value="page1">A2</option>
<optgroup label="Areas"><option value="page3">Area1</option><option value="page4">Area2</option>
</select>
</div>
</form>
<br /><br />
<form method="post" action="quote-redirect.asp" name="form1_NEW" id="form1_NEW" style="margin:0px;padding:0px;">
<div id="selectarea_NEW">
<p>when you choose a radio button the drop down below updates as above</p>
<select name="master" id="master" style="position:absolute;top:-999em;left:-999em;">
<input type="radio">postcodes
<br />
<input type="radio">areas
<br />
<Select>
</select>
</div>
</form>
</div>
</div>
</body>
</html>