Welcome to WebmasterWorld Guest from 50.19.34.234

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

     

psychomonkeyCK

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

10+ Year Member



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

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

WebmasterWorld Senior Member 10+ Year Member



[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

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

10+ Year Member



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

Many Thanks

CK

HocusPocus

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

10+ Year Member



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

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

WebmasterWorld Senior Member 10+ Year Member



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

HocusPocus

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

10+ Year Member



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

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

10+ Year Member



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

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

10+ Year Member



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

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

10+ Year Member



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

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

WebmasterWorld Senior Member 10+ Year Member



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

 

Featured Threads

Hot Threads This Week

Hot Threads This Month