<Select> menus with intergrated JavaScript

how to use JScript to generate a URL from various user selectable options

[psychomonkeyCK]

Right,

What I have is two select menus placed beside each other as well as an input button saying "go".

List one has 5 options:

a
b
c
d
e

List Two has 3 options:

1
2
3

What I would like is for a script to generate a URL from the selected options in the following way:

It takes the selected value in the first list(for this case we'll assume the user selected "b") and then the selected option in the second list (we'll assume that was "3") and adds a prefix (we'll use "http://www.website/folder") and adds a suffix (.htm). From the selected options ("b"+"3") and the preset prefix and suffix it makes a URL which, using the example would be:

[website...]

It makes this URL when the user clicks the "go" button and sends the user to that page.

The real list has 13 options in list one (the twelve months and a --select-- option) whilst the second list has 3 selectable options and one --select-- option. A GUI link is available upon request.

Would it be possible for somebody to give me the complete code for what I want?

Many Thanks

CK

[Birdman]

[u]In the head[/u]
function go(){
var L1 = document.theform.list1.value;
var L2 = document.theform.list2.value;
var url = "http://www.yoursite.com/folder/" + L1 + L2 + ".htm";
location.href = "url"
}

[u]In the body[/u]
<form name="theform">
<select name="list1">
<option value="a">a</option>
</select>
<select name="list2">
<option value="1">1</option>
</select>
<input type="submit" onsubmit="go()" />
</form>

I'm not the greates JavaScripter, but I think that will work:)

<added>Of course you need to add the other options</added>

[psychomonkeyCK]

Thanks but I' afraid it doesnt work. It doesnt seem to go to a URL when pressed.

Many Thanks

CK

[HocusPocus]

As Birdman's script but amend the L1, L2 assignments in go() to

var L1 = document.theform.list1.options[document.theform.list1.selectedIndex].value;
var L2 = document.theform.list2.options[document.theform.list2.selectedIndex].value;

Try that, see if it works.
Not sure if Birdman's
<input type="submit" onsubmit="go()" />
would work,
Maybes try

<input type=button value=Submit onclick="go()" />

[Birdman]

Yeah, I don't do much JS anymore. I do believe onsubmit will do the same thing, though. Thanks for fixing it HP.

[HocusPocus]

I'll agree to differ BM, an Input Element like a Submit button does not have an onsubmit event handler.

However, the onsubmit handler can attached to a form using something like

<form name="theform" onsubmit="go();">
...
<input type="submit">
</form>

or

<script>
...
theform.onsubmit=go;
...
</script>

Just to keep it right.

[psychomonkeyCK]

Rigth heres the code ive got at the moment:

head:

<script>
function go(){
var L1 = document.theform.list1.options[document.theform.list1.selectedIndex].value;
var L2 = document.theform.list2.options[document.theform.list2.selectedIndex].value;
var url = "http://www.birdwatchnorthumbria.co.uk/events/" + L1 + L2 + ".htm";
location.href = "url"
}
</script>

body:

<form name="theform">

<select name="list1" size="1" style="background-color:#ffffff; color: #666666; width: 160px;">
<option value="#" SELECTED>-- Select Month --</option>
<option value="jan">January</option>
<option value="feb">February</option>
<option value="mar">March</option>
<option value="apr">April</option>
<option value="may">May</option>
<option value="jun">June</option>
<option value="jul">July</option>
<option value="aug">August</option>
<option value="sep">September</option>
<option value="oct">October</option>
<option value="nov">November</option>
<option value="dec">December</option>

</select>

<select name="list2" size="1" style="background-color:#ffffff; color: #666666; width: 160px;">

<option value="#" SELECTED>-- Select Event Type --</option>
<option value="ae">All Events</option>
<option value="dt">Day Tours</option>
<option value="wb">Weekends Breaks</option>
<option value="pt">Personalised Tours</option>

</select>
<input type="button" value="Submit" onclick="go()"/>
</form>

What happens when you click submit is that it goes to this URL all the time:

[birdwatchnorthumbria.co.uk...]

which obviosuly isnt right. Any ways round this?

Many Thanks
CK

[HocusPocus]

Get rid of

var url = "http://www.birdwatchnorthumbria.co.uk/events/" + L1 + L2 + ".htm";
location.href = "url"

and change to

// Both selects need a value
if (L1!= "#" && L2!= "#")
{
var url = "http://www.birdwatchnorthumbria.co.uk/events/" + L1 + L2 + ".htm";
location.href = url;
}

If that doesn't do it let me know.

[psychomonkeyCK]

If i say give the selects a value 1 (value="1") and then 2 and the code in the head reads:

<script>
function go(){
if (L1!= "1" && L2!= "2")
{
var url = "http://www.birdwatchnorthumbria.co.uk/events/" + L1 + L2 + ".htm";
location.href = url;
}
}
</script>

it gives me an error when I click submit (L1 is undefined) for some reason and therefore doest go anywhere.

?

CK

[Birdman]

This works(tested it):

Note the changes in bold.

<html>
<head>
<script>
function go(){
var L1 = document.theform.list1.value;
var L2 = document.theform.list2.value;
if (L1!= "#" && L2!= "#")
{
var url = "http://www.Yoursite.co.uk/events/" + L1 + L2 + ".htm";
location.href(url);
}
}
</script>
</head>
<body>
<form name="theform">
<select name="list1" size="1" style="background-color:#ffffff; color: #666666; width: 160px;">
<option value="#" SELECTED>-- Select Month --</option>
<option value="jan">January</option>
etc...
</select>

<select name="list2" size="1" style="background-color:#ffffff; color: #666666; width: 160px;">
<option value="#" SELECTED>-- Select Event Type --</option>
<option value="ae">All Events</option>
etc...
</select>
<input type="button" value="Submit" onclick="go()"/>
</form>

</body>
</html>

Birdman