Welcome to WebmasterWorld Guest from 54.211.62.139

Forum Moderators: open

Message Too Old, No Replies

<Select> menus with intergrated JavaScript

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

     
4:54 pm on Feb 11, 2003 (gmt 0)

New User

10+ Year Member

joined:Jan 1, 2003
posts:24
votes: 0


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

5:20 pm on Feb 11, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 22, 2002
posts:2546
votes: 0


[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>

6:43 pm on Feb 11, 2003 (gmt 0)

New User

10+ Year Member

joined:Jan 1, 2003
posts:24
votes: 0


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

Many Thanks

CK

7:58 pm on Feb 11, 2003 (gmt 0)

Junior Member

10+ Year Member

joined:Dec 27, 2002
posts:125
votes: 0


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()" />

8:10 pm on Feb 11, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 22, 2002
posts:2546
votes: 0


Yeah, I don't do much JS anymore. I do believe onsubmit will do the same thing, though. Thanks for fixing it HP.
10:25 pm on Feb 11, 2003 (gmt 0)

Junior Member

10+ Year Member

joined:Dec 27, 2002
posts:125
votes: 0


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.

7:37 pm on Feb 12, 2003 (gmt 0)

New User

10+ Year Member

joined:Jan 1, 2003
posts:24
votes: 0


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

7:07 pm on Feb 13, 2003 (gmt 0)

Junior Member

10+ Year Member

joined:Dec 27, 2002
posts:125
votes: 0


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.

8:43 pm on Feb 13, 2003 (gmt 0)

New User

10+ Year Member

joined:Jan 1, 2003
posts:24
votes: 0


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

10:25 pm on Feb 13, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 22, 2002
posts:2546
votes: 0


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