homepage Welcome to WebmasterWorld Guest from 54.205.106.111
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
<Select> menus with intergrated JavaScript
how to use JScript to generate a URL from various user selectable options
psychomonkeyCK




msg:1488670
 4:54 pm on Feb 11, 2003 (gmt 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

 

Birdman




msg:1488671
 5:20 pm on Feb 11, 2003 (gmt 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>

psychomonkeyCK




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

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

Many Thanks

CK

HocusPocus




msg:1488673
 7:58 pm on Feb 11, 2003 (gmt 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()" />

Birdman




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

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

HocusPocus




msg:1488675
 10:25 pm on Feb 11, 2003 (gmt 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.

psychomonkeyCK




msg:1488676
 7:37 pm on Feb 12, 2003 (gmt 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

HocusPocus




msg:1488677
 7:07 pm on Feb 13, 2003 (gmt 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.

psychomonkeyCK




msg:1488678
 8:43 pm on Feb 13, 2003 (gmt 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

Birdman




msg:1488679
 10:25 pm on Feb 13, 2003 (gmt 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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved