Page 1 of 1
Help wanted with 3 drop down box onChange script
Posted: Mon Sep 23, 2002 10:36 am
by jamesf4218
Hello,
I have the following data.
Region1
Region2
Region3
County1
County1a
County1b
County2
County2a
County2b
County3
County3a
County3b
Town1
Town1a
Town1b
Town2
Town2a
Town2b
Town3
Town3a
Town3b
When the page loads up, in the first drop down box is all the regions, in the second is all the counties, in the third is all the towns.
If you select Region2 for example, immediately the county box changes (using onChange, I think) to show the counties in region2 (County2, County2a, County2b) and the town box changes to reflect the towns in region2 (Town2, Town2a, Town2b).
If you select county3 for example, the region box changes to region3 to reflect this and the town box changes to show the towns in county3.
If you select the town box then this automatically takes you to a dynamic page (which I have) which lists details about that town.
I hope this is all clear!
Please, can someone help me to do this. I have tried to modify triple combo scripts found on the net but they don't have this precise functionality.
Cheers
James
__________________
It has been said that if you were to put 100 monkeys in a room for an infinite amount of time and gave each one a typewriter, eventually they would reproduce the entire works of Shakespeare. Now, thanks to the Internet, we know that's not true...
James Fielding
Posted: Mon Sep 23, 2002 3:46 pm
by Johnm
Let's see what you have so far.
Direwolf
Posted: Tue Sep 24, 2002 3:51 am
by jamesf4218
Hello, Thanks for your reply. To be honest, I don't really know how to start.
I have the form below, but I don't know how to do anything more advanced. Any ideas appreciated...
<head>
</head>
<body>
<form name="places">
<select name="region">
<option>Region1</option>
<option>Region2</option>
<option>Region3</option>
</select>
<select name="county">
<option>County1</option>
<option>County1a</option>
<option>County1b</option>
<option>County2</option>
<option>County2a</option>
<option>County2b</option>
<option>County3</option>
<option>County3a</option>
<option>County3b</option>
</select>
<select name="town">
<option>Town1</option>
<option>Town1a</option>
<option>Town1b</option>
<option>Town2</option>
<option>Town2a</option>
<option>Town2b</option>
<option>Town3</option>
<option>Town3a</option>
<option>Town3b</option>
</select>
</form>
</body>
Posted: Tue Sep 24, 2002 12:02 pm
by Johnm
i Well, I won't do it for you but here is a start.
In the HTML:
Code: Select all
<select name="region"
onChange="regionChange(this.form)">
<option>Region1</option>
<option>Region2</option>
<option>Region3</option>
</select>
Include a seperate file called something like locationPage.js
and make sure that you either put the include statement between <script> and </script> tags or put them in the include file at the beginning and end respectivly. You could skip the include file and just have the needed functions on the page somewhere but still, they nees to be between the script tags.
so here is a start to your functions, you will probably need three as you have three sections (region, county, town)
Code: Select all
<script>
function regionChange(form)
{
switch(form.region.optionsїform.region.selectedIndex].text)
{
case "Region1":
//Clears the options currently in the country select box
// (clearOptions function below)
clearOptions(form.country,"");
//Add the correct countries (loadOptions function below)
//Add as many as you want.
loadOptions (form.country,"Cntry1=Cntry1,Cntry2=Cntry2");
Break;
case "Region2":
//Clears the options currently in the country select box
// (clearOptions function below)
clearOptions(form.country,"");
//Add the correct countries (loadOptions function below)
//Add as many as you want.
loadOptions (form.country,"Cntry3=Cntry3,Cntry4=Cntry4");
Break;
//Add as many cases as you wish, look up the syntax for the default case too.
}
}
</script>
That should get you going, here are the functions you need to clear and load the select boxes:
Code: Select all
<script>
// Sets options in an select box
function loadOptions(oElement,szNameVal)
{
var aNV = szNameVal.split(",");
for (x=0; x<aNV.length; x++)
{
aItem = aNVїx].split('=');
oElement.optionsїx]=new Option(aItemї0], aItemї1]);
}
}
// Clears options in an option box
function clearOptions(oElement,szName,szValue)
{
for(x=oElement.options.length-1;x>0;x--)oElement.optionsїx]=null;
oElement.optionsї0]=new Option(szName,szValue);
}
</script>
Direwolf
Posted: Tue Sep 24, 2002 12:04 pm
by Johnm
Sorry, the format of the indention is gone but you should be able to figure it out.
Posted: Wed Sep 25, 2002 3:50 am
by jamesf4218
.Thanks a lot for your help.
I have modified the code to get it to work and what I have so far is:
<head>
<script>
function regionChange(places)
{
switch(places.region.options[places.region.selectedIndex].text)
{
case "Region1":
clearOptions(places.county,"");
loadOptions (places.county,"County1,County1a,County1b");
clearOptions(places.town,"");
loadOptions (places.town,"Town1,Town1a,Town1b");
Break;
case "Region2":
clearOptions(places.county,"");
loadOptions (places.county,"County2,County2a,County2b");
clearOptions(places.town,"");
loadOptions (places.town,"Town2,Town2a,Town2b");
Break;
}
}
</script>
<script>
// Sets options in an select box
function loadOptions(oElement,szNameVal)
{
var aNV = szNameVal.split(",");
for (x=0; x<aNV.length; x++)
{
aItem = aNV[x].split('=');
oElement.options[x]=new Option(aItem[0], aItem[1]);
}
}
// Clears options in an option box
function clearOptions(oElement,szName,szValue)
{
for(x=oElement.options.length-1;x>0;x--)oElement.options[x]=null;
oElement.options[0]=new Option(szName,szValue);
}
</script>
</head>
<body>
<form name="places">
<select name="region" onChange="regionChange(this.form)">
<option>All</option>
<option>Region1</option>
<option>Region2</option>
<option>Region3</option>
</select>
<select name="county">
<option>All</option>
<option>County1</option>
<option>County1a</option>
<option>County1b</option>
<option>County2</option>
<option>County2a</option>
<option>County2b</option>
<option>County3</option>
<option>County3a</option>
<option>County3b</option>
</select>
<select name="town">
<option>All</option>
<option>Town1</option>
<option>Town1a</option>
<option>Town1b</option>
<option>Town2</option>
<option>Town2a</option>
<option>Town2b</option>
<option>Town3</option>
<option>Town3a</option>
<option>Town3b</option>
</select>
</form>
</body>
This works fine, but when I select Region1 or Region2 I get a Javascript error message saying:
'Break is undefined'
Any ideas?
Cheers
James
Posted: Wed Sep 25, 2002 6:23 am
by Johnm
Try changing "Break;" to "break;"
Direwolf
Posted: Wed Sep 25, 2002 7:26 am
by jamesf4218
OK thanks
Posted: Wed Sep 25, 2002 8:06 am
by jamesf4218
Hello, I have another problem with this page:
If I have the dropdown box,
<select name="town">
<option>Town1</option>
<option>Town2</option>
<option>Town3</option>
</select>
What I want is, when the user makes a selection, he is redirected to the page town.php and the name of the town is passed through as well, so the url would be something like town.php?Town1
How can I do this please?
Many thanks
James