Drop down forms that when submitted load url

Hi guys

I am trying to make a basic drop down forum which when options are selected they will load a URL on a submit button click.

I would like something like this

Drop down one

Make of bike:
KTM
BMW
Ect

Model of bike:
(if ktm was picked above would show)
990
EXC
Ect

(if BMW picked above would show)
GS
Adventure
Ect

So if make of bike was ktm and model was 990 on click of submit button would load
www.website.com/ktm/990


Sorry if this dose not make sence iv tryed to explain as best I can.

this is the code i have so far. i have got it to auto select so if you pick KTM it shows you models of KTM (990, EXC, Ect) but i cant get the URL bit to work and i dont really have any idea how to

javascript

 <script language="javascript" type="text/javascript">
<!--
 function setOptions(chosen) {
var selbox = document.myform.model;
 
selbox.options.length = 0;
if (chosen == " ") {
  selbox.options[selbox.options.length] = new Option('Please select one of the options above first',' ');
 
}
if (chosen == "BMW") {
  selbox.options[selbox.options.length] = new
Option('R1200-GS-Adventure','R1200-GS-Adventure');
  selbox.options[selbox.options.length] = new
Option('R1200-GS','R1200-GS');
  selbox.options[selbox.options.length] = new
Option('R1200-RT','R1200-RT');
  selbox.options[selbox.options.length] = new
Option('1150-GS-Adventure','1150-GS-Adventure');
  selbox.options[selbox.options.length] = new
Option('1150-GS','1150-GS');
}
if (chosen == "KTM") {
  selbox.options[selbox.options.length] = new
Option('990','990');
  selbox.options[selbox.options.length] = new
Option('640','640');
}
if (chosen == "Yamaha") {
  selbox.options[selbox.options.length] = new
Option('Tenére 660XT','Tenére 660XT');
  selbox.options[selbox.options.length] = new
Option('Super Tenére 1200XT','Super Tenére 1200XT');
}
}
// -->
</script>

Code (markup):

form code

  <form name="myform"><div align="center">
<select name="bike" size="1"
onchange="setOptions(document.myform.bike.options[document.myform.bike.selectedIndex].value);">
<option value=" " selected="selected"> </option>
<option value="BMW">BMW</option>
<option value="KTM">KTM</option>
<option value="Yamaha">Yamaha</option>
</select><br> <br>
<select name="model" size="1">
<option value=" " selected="selected">Please select one of the options above first</option>
</select>
<input type="button" name="go" value="Search"
onclick="alert(document.myform.model.options[document.myform.model.selectedIndex].value);">
</div></form>

Code (markup):

any help would be great

cheers
nick

 

Try this to start. You'll have to load the dropdown with the URLs of the pages as the values as selections are made. (Using AJAX with PHP and loading from a database is a better way to go than doing it all in Javascript.)

 <script language="javascript" type="text/javascript">
<!--

[COLOR=#ff0000]function loadNewPage() {
   window.location = document.myform.model.options[document.myform.model.selectedIndex].value;
}[/COLOR]

 function setOptions(chosen) {
var selbox = document.myform.model;
 
selbox.options.length = 0;
if (chosen == " ") {
  selbox.options[selbox.options.length] = new Option('Please select one of the options above first',' ');
 
}
if (chosen == "BMW") {
  selbox.options[selbox.options.length] = new
Option('R1200-GS-Adventure','R1200-GS-Adventure');
  selbox.options[selbox.options.length] = new
Option('R1200-GS','R1200-GS');
  selbox.options[selbox.options.length] = new
Option('R1200-RT','R1200-RT');
  selbox.options[selbox.options.length] = new
Option('1150-GS-Adventure','1150-GS-Adventure');
  selbox.options[selbox.options.length] = new
Option('1150-GS','1150-GS');
}
if (chosen == "KTM") {
  selbox.options[selbox.options.length] = new
Option('990','990');
  selbox.options[selbox.options.length] = new
Option('640','640');
}
if (chosen == "Yamaha") {
  selbox.options[selbox.options.length] = new
Option('Tenére 660XT','Tenére 660XT');
  selbox.options[selbox.options.length] = new
Option('Super Tenére 1200XT','Super Tenére 1200XT');
}
}
// -->
</script>

Code (markup):

form code

  <form name="myform"><div align="center">
<select name="bike" size="1"
onchange="setOptions(document.myform.bike.options[document.myform.bike.selectedIndex].value);">
<option value=" " selected="selected"> </option>
<option value="BMW">BMW</option>
<option value="KTM">KTM</option>
<option value="Yamaha">Yamaha</option>
</select><br> <br>
<select name="model" size="1">
<option value=" " selected="selected">Please select one of the options above first</option>
</select>
<input type="button" name="go" value="Search"
[COLOR=#ff0000]onclick="loadNewPage();[/COLOR]">
</div></form>

Code (markup):