Jscript pull-down menu, no "submit" button

[Jazz]

I need to do a javascript pull-down navigation menu that hops you to the menu selection without hitting a "go!" or "submit" button. I can't find my copy of the code anywhere, and I can't think of a single darn site with an example of it at the moment....

(I don't care for this type of navigation, but the client insists on it....)

Anybody? TIA! :)

Jazz

[Dan Kaplan]

This will do it and has the added bonus of bringing the selected option back to the default (often a problem with drop-downs with no "go" button if you press the back button):


<form method=POST action=&quot;http://domain.com/cgi-bin/redirect.cgi&quot; target=&quot;Main&quot;>
<select name=&quot;newlocation&quot; onChange=&quot;refresh(0,this.options[this.selectedIndex].value)&quot;>
<option value=&quot;http://domain.com/page1.html&quot;>Page 1
<option value=&quot;http://domain.com/page2.html&quot;>Page 2
<option value=&quot;http://domain.com/page3.html&quot;>Page 3
<option value=&quot;http://domain.com/page4.html&quot;>Page 4
</select><INPUT TYPE=&quot;IMAGE&quot; NAME=&quot;&quot; SRC=&quot;http://domain.com/spacer.gif&quot; BORDER=&quot;0&quot; WIDTH=&quot;1&quot; HEIGHT=&quot;1&quot; ALT=&quot;Go&quot;></form>

err, I just realized you didn't say anything about Perl...

Drop-down

[This message has been edited by Dan Kaplan (edited 01-24-00@10:58 pm)]

[Shalazar]

Here you go, nothing but JS for an instant redirect dropdown selection box with no submit button:


<FORM name=&quot;nav&quot; ><SELECT name=&quot;nav&quot; onChange='if (this.form.nav.options[this.form.nav.selectedIndex].value != &quot;nil&quot;) { self.location.href=this.form.nav.options[this.form.nav.selectedIndex].value }' >
[nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp]<OPTION value=&quot;nil&quot;>------------------------------</OPTION>
[nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp]<option value=&quot;URL HERE&quot;>URL DESCRIPTION HERE</option>

[nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp]<OPTION value=&quot;nil&quot;>------------------------------</OPTION>

</SELECT>
</FORM>

[This message has been edited by Shalazar (edited 01-24-00@11:43 pm)]

[Justin]

</font><font face="Courier" size="3"><form method=POST action=&quot;http://domain.com/cgi-bin/redirect.cgi&quot; <font color=#FF0000>name=&quot;MyForm&quot;</font>>
<select name=&quot;newlocation&quot; <font color=#FF0000>onChange=&quot;MyForm.submit()&quot;</font>>
<option value=&quot;http://domain.com/page1.html&quot;>Page 1
<option value=&quot;http://domain.com/page2.html&quot;>Page 2
<option value=&quot;http://domain.com/page3.html&quot;>Page 3
<option value=&quot;http://domain.com/page4.html&quot;>Page 4
</select>
</form>
</font><font face="Verdana, Arial" size="2">

The above simply raises the form.sumbit() event for &quot;MyForm&quot; when the select box changes. However, I personally do not like this type of redirect menu because I often middle-click the box to highlite it, and use the scroll wheel to cycle through the options w/o having to click. Also note that someone using a keyboard would not always be able to drop down the menu - they'd have to use the arrow keys to cycle through them, being instantly redirected as soon as they select a new option.

But that's just my opinion - I could be wrong :)

Hope this helps.

<edit>
Just noticed the comments above - yes, this assumes use of the redirect CGI script, which may not be the case... Ok, change the first two lines to:

</font><font face="Courier" size="3"><form name=&quot;MyForm&quot;>
<select name=&quot;newlocation&quot; onChange=&quot;document.location.href=MyForm.newlocation.value&quot;></font><font face="Verdana, Arial" size="2">

Or something like that...
</edit>

------------------
Justin Nelson
FutureQuest Support
[This message has been edited by Justin (edited 01-24-00@11:59 pm)]

[Jazz]

I appreciate all of your suggestions, and I'm hoping the Greek code you've volunteered gets clearer to me as I dink around with this...:) I think I'm going to try the Justin version, because it looks like it'll hurt my brain less.

I do need this to be javascript-only, because I'm uncertain what they've got in the way of CGI scripts (and I'm WAY out of practice with Perl/CGI anyway). I'm REALLY trying to talk these guys into coming over to FQuest.

Anyway. OK, call me a hopeless case, but do I HAVE to use absolute URLs in the values, or can I use relative addresses? While we're reworking this whole site, it's living as a subdirectory under my domain, and absolute URLs are going to hop them back to their old-look site.

Javascript
(Dan--I like how you work the &quot;D&quot; in at the end of your messages...I'm pretty limited with a &quot;J&quot;!!! :)
[This message has been edited by Jazz (edited 01-25-00@08:48 am)]

[Dan Kaplan]

JavaScript,[nbsp][nbsp]:)

In case you do decide to use the method I posted, I noticed that I left the target=&quot;main&quot; in it, which is used for the frames setup where I have it.[nbsp][nbsp]That makes what I said about refreshing to the default selection all the more important...[nbsp][nbsp]If you're not using it with frames, just omit that bit.

Also, the redirect.cgi that Justin and I included is any variety of tiny free perl redirect scripts that you can pick up most anywhere.[nbsp][nbsp]http://cgi.resourceindex.com has dozens of them.[nbsp][nbsp]Of course, I wouldn't be surprised if Justin wrote his own in PHP/MySQL![nbsp][nbsp];)

Dpart

p.s. I won't hold it against you if you use the same sign-off a few times.[nbsp][nbsp]:)

[Jazz]

Hey, I've got to re-ask one of my questions that seems to have been overlooked here amidst all of these helpful suggestions:

Do I HAVE to use absolute URLs in the values, or can I use relative addresses? (&quot;http://wholeaddress&quot; vs &quot;../directory/page.html&quot;)

Your code examples all show absolute URLs, an I'm wondering if it HAS to be written that way...?

Jumbling up my Javascript ;)[nbsp]

[Dan Kaplan]

Either relative or absolute URL's should work fine.[nbsp][nbsp]However, Justin and Deb recently showed me the light and convinced me that relative URL's should only be used for local testing.[nbsp][nbsp]:)

Disciple

[Jazz]

However, Justin and Deb recently showed me the light and convinced me that relative URL's should only be used for local testing. Was there a thread on this? *I'd* certainly be interested in becoming enlightened...

J..umm... J...errr
(Oh for the Pete's sake, J is a totally useless letter; I'm never going to be able to keep up with you. I'll just have to change my name.... :D )
[This message has been edited by Jazz (edited 01-26-00@11:12 am)]

[Deb]

Jump'n Jahosiphats ?

(I have no idea how to spell it but my grandfather was obsessed with that phrase)

At any rate: http://www.aota.net/ubb/Forum2/HTML/000181-1.html

[Justin]

Oh, you are just trying to justify - just think about it this way: how many cuss words start with j and how many start with <font color=#FF0000>d</font>? I like the letter j, and I am jumping for joy about the whole thing :P

You <font color=#FF0000>d</font> people are just jealous :)

Jumpin' jiminy!

----------------
JustIn Time ;)[nbsp][nbsp] (or is that JustIn Case?)

[This message has been edited by Justin (edited 01-26-00@1:16 pm)]

[Dan Kaplan]

I've created a monster!!!!

Dmon[nbsp][nbsp](said with my best Jamaican accent ;)[nbsp][nbsp])

[Charles Capps]

Hopefully this will just be a phase they're going through...

[Justin]

I was going to start copying Dan's idea for my sig but ran into the same J problem...

Joking

------------------
Justin Nelson
FutureQuest Support

[Dan Kaplan]

You guys are just jealous![nbsp][nbsp]:P

Dnial

[Deb]

Well, we all know D is the better letter.[nbsp][nbsp]Only those special people like Deb, Dan, and Diamond-back are allowed to use them.[nbsp][nbsp]I think we all agree that Dan does it best though!

Drowsy