PDA

Click to See Complete Forum and Search --> : Drop Down Menus

fernboneyard
07-24-2003, 11:16 AM
I got this simple drop down code from The JavaScript Source and added the TABLE/TR/TD codes because that's how I intend to use it.

The problem is that I need to add another TD with a similar drop down menu but with different destination websites. When I copy the body script into a second TD - nothing works anymore. Any suggestions.

Also, is there a way to make this code work where I can go to other pages in the same folder without putting in the "http://www... part of the code. Just the destination html file. Why should I have to go out on the internet again when I'm going to one of my own web pages on my own site.

<HTML>

<HEAD>

<TITLE>Drop Down Menu</TITLE>

<SCRIPT LANGUAGE="JavaScript">

<!-- Original: Alex Tu <boudha1@hotmail.com> -->
<!-- Web Site: http://www.geocities.com/alex_2106 -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
function formHandler(form){
var URL = document.form.site.options[document.form.site.selectedIndex].value;
window.location.href = URL;
}
// End -->
</SCRIPT>

</HEAD>

<BODY>
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0" WIDTH="100%">

<TR ALIGN="center">

<TD>

<form name="form">
<select name="site" size=1 onChange="javascript:formHandler()">
<option value="">Go to....
<option value="http://www.yahoo.com">Yahoo
<option value="http://www.metacrawler.com">Metacrawler

</select>

</form>

</TD>

</TR>
</TABLE>
</BODY>
</HTML>
DJRobThaMan
07-24-2003, 11:56 AM
Also, is there a way to make this code work where I can go to other pages in the same folder without putting in the "http://www... part of the code. Just the destination html file. Why should I have to go out on the internet again when I'm going to one of my own web pages on my own site.


yep... all you have to do in the href is type the file name (eg. nextpage.html) unless it's ibn a different folder. Then you would put folder/nextpage.html(if it's in a sub folder of the one the present page is in) or ../folder/nextpage.html (if it's in a folder above the one the present page is in).

When I copy the body script into a second TD - nothing works anymore. Any suggestions.

are you copying the body tag as well?
(i know it's a dumb question but I've been known to do worse just cuz I'm not paying attention)
fernboneyard
07-24-2003, 12:39 PM
Thanks DJRobthaMan.

Leaving off the http: and just listing the html files in the same folder works. (Must have made another mistake before.)

Still having trouble with more than one drop down in the same html page.

This is what I've tried and it doesn't work.

<HTML>

<HEAD>

<TITLE>Drop Down Menu</TITLE>

<SCRIPT LANGUAGE="JavaScript">

<!-- Original: Alex Tu <boudha1@hotmail.com> -->
<!-- Web Site: http://www.geocities.com/alex_2106 -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
function formHandler1(form){
var URL = document.form.site.options[document.form.site.selectedIndex].value;
window.location.href = URL;

function formHandler2(form){
var URL = document.form.site.options[document.form.site.selectedIndex].value;
window.location.href = URL;
}
// End -->
</SCRIPT>

</HEAD>

<BODY>
<TABLE BORDER="1" CELLSPACING="1" CELLPADDING="1" WIDTH="100%">

<TR ALIGN="center">

<TD>

<form name="form">
<select name="site" size=1 onChange="javascript:formHandler1()">
<option value="">Go to....
<option value="http://www.yahoo.com">Yahoo
<option value="http://www.metacrawler.com">Metacrawler
<option value="http://www.altavista.digital.com">Altavista
<option value="http://www.webcrawler.com">Webcrawler
<option value="http://www.lycos.com">Lycos
<option value="http://javascript.internet.com">JavaScript Source
</select>

</form>

</TD>

<TD>

<form name="form">
<select name="site" size=1 onChange="javascript:formHandler2()">
<option value="">Go to....
<option value="http://www.yahoo.com">Yahoo
<option value="http://www.metacrawler.com">Metacrawler
<option value="http://www.altavista.digital.com">Altavista
<option value="http://www.webcrawler.com">Webcrawler
<option value="http://www.lycos.com">Lycos
<option value="http://javascript.internet.com">JavaScript Source
</select>

</form>

</TD>


</TR>
</TABLE>
</BODY>
</HTML>
DJRobThaMan
07-24-2003, 02:28 PM
Try this



<HTML>

<HEAD>

<TITLE>Drop Down Menu</TITLE>

<SCRIPT LANGUAGE="JavaScript">

<!-- Original: Alex Tu <boudha1@hotmail.com> -->
<!-- Web Site: http://www.geocities.com/alex_2106 -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
function formHandler1(){
var URL = document.form.site.options[document.form.site.selectedIndex].value;
window.location.href = URL;
}
function formHandler2(){
var URL = document.form.site.options[document.form.site.selectedIndex].value;
window.location.href = URL;
}

// End -->
</SCRIPT>

</HEAD>

<BODY>
<TABLE BORDER="1" CELLSPACING="1" CELLPADDING="1" WIDTH="100%">

<TR ALIGN="center">

<TD>

<form name="form">
<select name="site" size=1 onChange="javascript:formHandler1()">
<option value="">Go to....
<option value="http://www.yahoo.com">Yahoo
<option value="http://www.metacrawler.com">Metacrawler
<option value="http://www.altavista.digital.com">Altavista
<option value="http://www.webcrawler.com">Webcrawler
<option value="http://www.lycos.com">Lycos
<option value="http://javascript.internet.com">JavaScript Source
</select>
</form>


</TD>

<TD>
<form name="form1">

<select name="site" size=1 onChange="javascript:formHandler2()">
<option value="">Go to....
<option value="http://www.yahoo.com">Yahoo
<option value="http://www.metacrawler.com">Metacrawler
<option value="http://www.altavista.digital.com">Altavista
<option value="http://www.webcrawler.com">Webcrawler
<option value="http://www.lycos.com">Lycos
<option value="http://javascript.internet.com">JavaScript Source
</select>

</form>

</TD>


</TR>
</TABLE>
</BODY>
</HTML>

Lata
elwell
07-24-2003, 03:15 PM
I dont know that much about jscript but i might be able to fix it. U named 2 things "form" in ur dot syntax... try this maybe:

<HTML>

<HEAD>

<TITLE>Drop Down Menu</TITLE>

<SCRIPT LANGUAGE="JavaScript">

<!-- Original: Alex Tu <boudha1@hotmail.com> -->
<!-- Web Site: http://www.geocities.com/alex_2106 -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
function formHandler1(){
var URL = document.form.site.options[document.form.site.selectedIndex].value;
window.location.href = URL;
}
function formHandler2(){
var URL = document.form.site.options[document.form1.site.selectedIndex].value;
window.location.href = URL;
}

// End -->
</SCRIPT>

</HEAD>

<BODY>
<TABLE BORDER="1" CELLSPACING="1" CELLPADDING="1" WIDTH="100%">

<TR ALIGN="center">

<TD>

<form name="form">
<select name="site" size=1 onChange="java script:formHandler1()">
<option value="">Go to....
<option value="http://www.yahoo.com">Yahoo
<option value="http://www.metacrawler.com">Metacrawler
<option value="http://www.altavista.digital.com">Altavista
<option value="http://www.webcrawler.com">Webcrawler
<option value="http://www.lycos.com">Lycos
<option value="http://javascript.internet.com">JavaScript Source
</select>
</form>


</TD>

<TD>
<form name="form1">

<select name="site" size=1 onChange="java script:formHandler2()">
<option value="">Go to....
<option value="http://www.yahoo.com">Yahoo
<option value="http://www.metacrawler.com">Metacrawler
<option value="http://www.altavista.digital.com">Altavista
<option value="http://www.webcrawler.com">Webcrawler
<option value="http://www.lycos.com">Lycos
<option value="http://javascript.internet.com">JavaScript Source
</select>

</form>

</TD>


</TR>
</TABLE>
</BODY>
</HTML>
fernboneyard
07-24-2003, 03:47 PM
I tried both codes from DJRob and elwell. (I think they're identical.) Neither worked though. Thanks.

I also tried this and it didn't work either. This should be one of the most widely used codes on the web. I'm baffled that there aren't samples of this everywhere.

Appreciate any effort you can give.

<HTML>

<HEAD>

<TITLE>Drop Down Menu</TITLE>

<SCRIPT LANGUAGE="JavaScript">

<!-- Original: Alex Tu <boudha1@hotmail.com> -->
<!-- Web Site: http://www.geocities.com/alex_2106 -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
function formHandler(form){
var URL = document.form.site.options[document.form.site.selectedIndex].value;
window.location.href = URL;

}
// End -->
</SCRIPT>

</HEAD>

<BODY>
<TABLE BORDER="1" CELLSPACING="1" CELLPADDING="1" WIDTH="100%">

<TR ALIGN="center">

<TD>

<form name="form">
<select name="site" size=1 onChange="javascript:formHandler1()">
<option value="">Go to....
<option value="http://www.yahoo.com">Yahoo
<option value="http://www.metacrawler.com">Metacrawler
<option value="http://www.altavista.digital.com">Altavista
<option value="http://www.webcrawler.com">Webcrawler
<option value="http://www.lycos.com">Lycos
<option value="http://javascript.internet.com">JavaScript Source
</select>

</form>

</TD>

<TD>

<form name="form">
<select name="site" size=1 onChange="javascript:formHandler2()">
<option value="">Go to....
<option value="http://www.yahoo.com">Yahoo
<option value="http://www.metacrawler.com">Metacrawler
<option value="http://www.altavista.digital.com">Altavista
<option value="http://www.webcrawler.com">Webcrawler
<option value="http://www.lycos.com">Lycos
<option value="http://javascript.internet.com">JavaScript Source
</select>

</form>

</TD>


</TR>
</TABLE>
</BODY>
</HTML>
fernboneyard
07-24-2003, 03:50 PM
Unbelievable that I had an error in my last post. This is what I meant to send.

<HTML>

<HEAD>

<TITLE>Drop Down Menu</TITLE>

<SCRIPT LANGUAGE="JavaScript">

<!-- Original: Alex Tu <boudha1@hotmail.com> -->
<!-- Web Site: http://www.geocities.com/alex_2106 -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
function formHandler(form){
var URL = document.form.site.options[document.form.site.selectedIndex].value;
window.location.href = URL;

}
// End -->
</SCRIPT>

</HEAD>

<BODY>
<TABLE BORDER="1" CELLSPACING="1" CELLPADDING="1" WIDTH="100%">

<TR ALIGN="center">

<TD>

<form name="form">
<select name="site" size=1 onChange="javascript:formHandler()">
<option value="">Go to....
<option value="http://www.yahoo.com">Yahoo
<option value="http://www.metacrawler.com">Metacrawler
<option value="http://www.altavista.digital.com">Altavista
<option value="http://www.webcrawler.com">Webcrawler
<option value="http://www.lycos.com">Lycos
<option value="http://javascript.internet.com">JavaScript Source
</select>

</form>

</TD>

<TD>

<form name="form">
<select name="site" size=1 onChange="javascript:formHandler()">
<option value="">Go to....
<option value="http://www.yahoo.com">Yahoo
<option value="http://www.metacrawler.com">Metacrawler
<option value="http://www.altavista.digital.com">Altavista
<option value="http://www.webcrawler.com">Webcrawler
<option value="http://www.lycos.com">Lycos
<option value="http://javascript.internet.com">JavaScript Source
</select>

</form>

</TD>


</TR>
</TABLE>
</BODY>
</HTML>
DJRobThaMan
07-24-2003, 04:42 PM
Yeah, technically what I posted isn't supposed to work but it worked here on this computer (damn thing sucks beyond belief)


but, looking past all that i just looked at my post and realized it got edited while it was posted. When you call the function in the body both places "java script" should have no space between "java" and "script".

Try that.
fernboneyard
07-24-2003, 06:00 PM
DJRob,

You da man.

Thanks loads.

I've been struggling with this for over a month before finding this forum.

Thanks much to elwell too. His code was changed the same way with the space between "java" and "script". (What else can go wrong?)


Fern
fernboneyard
08-24-2003, 04:14 PM
I spoke too soon. The code doesn't work completely. I can't get different menu locations to work in a second drop down box. No matter what I do, the menu locations for the second drop down box take on the same values as the first drop down box. Any ideas???
David Harrison
08-24-2003, 04:40 PM
I've got an idea:
fernboneyard
09-01-2003, 11:38 AM
Thanks loads Lavalamp. Your file worked like a charm and is very clean.

Here's the tested and workable code:
(I've attached the file in case the pagination here upsets the code.

Thanks again.

<HTML>
<HEAD>
<TITLE>Drop Down Menu</TITLE>
<script type="text/javascript"><!--
function formHandler(select){
window.location.href = document.getElementById(select).options[document.getElementById(select).selectedIndex].value;
}
//--></script>
</HEAD>

<BODY>
<TABLE BORDER="1" CELLSPACING="1" CELLPADDING="1" WIDTH="100%">

<TR ALIGN="center">

<TD>
<form>
<select id="site1" onchange="formHandler(this.id)">
<option value="">Go to....
<option value="http://www.yahoo.com">Yahoo
<option value="http://www.metacrawler.com">Metacrawler
<option value="http://www.altavista.digital.com">Altavista
<option value="http://www.webcrawler.com">Webcrawler
<option value="http://www.lycos.com">Lycos
<option value="http://javascript.internet.com">JavaScript Source
</select>
</form>
</TD>

<TD>
<form>
<select id="site2" onchange="formHandler(this.id)">
<option value="">Go to....</option>
<option value="http://www.altavista.digital.com">Altavista
<option value="http://www.webcrawler.com">Webcrawler
<option value="http://www.lycos.com">Lycos
<option value="http://javascript.internet.com">JavaScript Source
<option value="http://www.yahoo.com">Yahoo
<option value="http://www.metacrawler.com">Metacrawler
</select>
</form>

</TD>

<TD>
<form>

<select id="site3" onchange="formHandler(this.id)">
<option value="">Go to....</option>
<option value="http://www.lycos.com">Lycos
<option value="http://javascript.internet.com">JavaScript Source
<option value="http://www.yahoo.com">Yahoo
<option value="http://www.metacrawler.com">Metacrawler
<option value="http://www.altavista.digital.com">Altavista
<option value="http://www.webcrawler.com">Webcrawler

</select>

</form>

</TD>
</TR>
</TABLE>
</BODY>
</HTML>
David Harrison
09-01-2003, 11:58 AM
Happy to help. :)