dynamic drop down menu (part 2)...

F

firstcustomer

Further to my earlier post, I've found something that does partly what
I'm doing, but there are two issues:

1) There is an error in the script. Being a Javascript newbie, I've no
idea what the problem is.

2) I don't know how to re-program the script so that it opens up a url
depending on the choices made.

Here is the code (thanks Google!), I'd appreciate any help the you can
give.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<TITLE>Dynamic Dropdown Boxes</TITLE>
<META NAME="Generator" CONTENT="TextPad 3.0">
<META NAME="Author" CONTENT="Heidi Housten">
</HEAD>


<style>
body,table,td {font-family:verdana; font-size:9pt}
select {width:130;font-family:verdana}
pre { font-size:9pt }
</style>





<script language=javascript>
<!--
mainOpt = new Array()
subOpt = new Array()
mainOpt[0] = "How to relax"
subOpt [0] = new Array("","","")
mainOpt[1] = "Hot Spots"
subOpt [1] = new Array("Pick a Hot Spot","Mojave","Mars","Death
Valley","Mt. St. Helens")
mainOpt[2] = "Festivals"
subOpt [2] = new Array("Which One?","Mardi Gras","Cinco de
Mayo","Midsummer","Kite Festival")
mainOpt[3] = "Good Books"
subOpt [3] = new Array("Which Book?","N is for Noose","Four to
Score","A Grave Talent","Six of One")
mainOpt[4] = "Holidays"
subOpt [4] = new Array("Choose
Holiday","Cruises","Safaris","Ballooning","Adventures")
function init()
{

fillCombo(document.forms.myMenus.mainMenu,mainOpt)
fillCombo(document.forms.myMenus.mainBox,mainOpt)
}

function fillCombo(cmbBox,aryMenu)
{
cmbBox.length = 0 // Clear out the current options
for (menuOpt in aryMenu)
{
cmbBox.options[cmbBox.length] = new
Option(aryMenu[menuOpt],cmbBox.length)
}
//Show first item if it is a drop down
cmbBox.selectedIndex=0
}
//-->
</script>

<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#FF0000" onload="init()">
<center>
<form name=myMenus>
<br>an example<br><br>
<!-- do select template for older browsers, some
can't change size dynamically -->
<select name=mainMenu
onchange="fillCombo(subMenu,subOpt[this.selectedIndex])">
<option>
<option>
<option>
<option>
<option>
<option>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</select><br><br>
<select name=subMenu>
<option>
<option>
<option>
<option>
<option>
<option>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</select>
<br>
</form>
</center>
</BODY>
</HTML>
 
B

Beauregard T. Shagnasty

Here is the code (thanks Google!), I'd appreciate any help the you can
give.
Click to expand...

I don't do JavaScript, but while we're here...
<style>
body,table,td {font-family:verdana; font-size:9pt}
select {width:130;font-family:verdana}
pre { font-size:9pt }
</style>
Click to expand...

9pt? Points are for printing. Many people won't be able to read that,
and may not be able to resize it in some browsers. Set your font-size to
100%.

http://www.xs4all.nl/~sbpoley/webmatters/fontsize.html
http://www.xs4all.nl/~sbpoley/webmatters/verdana.html
 
J

Jonathan N. Little

Further to my earlier post, I've found something that does partly what
I'm doing, but there are two issues:
Click to expand...


The reason you did not get a satifactory response is that most feel that
what your are attempting is a 'bad idea'. But in the matter of
JavaScript (which must be enabled for the form to work, the other bad
idea) you have some obvious errors which I will show to you, educational
and all.
1) There is an error in the script. Being a Javascript newbie, I've no
idea what the problem is.

2) I don't know how to re-program the script so that it opens up a url
depending on the choices made.

Here is the code (thanks Google!), I'd appreciate any help the you can
give.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
Click to expand...

Ugh, please look up doctype. This is ancient.
<HTML>
<HEAD>
<TITLE>Dynamic Dropdown Boxes</TITLE>
<META NAME="Generator" CONTENT="TextPad 3.0">
<META NAME="Author" CONTENT="Heidi Housten">
</HEAD>


<style>
body,table,td {font-family:verdana; font-size:9pt}
select {width:130;font-family:verdana}
pre { font-size:9pt }
</style>
Click to expand...

Next although ending JavaScript statements with a ';' is optional I
recommend it because is prevents errors when a single statement spans
more than on line. Also your can gang more than one statement on a
single line:
var aOpt=new Array; var oMine=new Object;
<script language=javascript>
<!--
mainOpt = new Array()
subOpt = new Array()
mainOpt[0] = "How to relax"
subOpt [0] = new Array("","","")
mainOpt[1] = "Hot Spots"
subOpt [1] = new Array("Pick a Hot Spot","Mojave","Mars","Death
Valley","Mt. St. Helens")
mainOpt[2] = "Festivals"
subOpt [2] = new Array("Which One?","Mardi Gras","Cinco de
Mayo","Midsummer","Kite Festival")
mainOpt[3] = "Good Books"
subOpt [3] = new Array("Which Book?","N is for Noose","Four to
Score","A Grave Talent","Six of One")
mainOpt[4] = "Holidays"
subOpt [4] = new Array("Choose
Holiday","Cruises","Safaris","Ballooning","Adventures")
function init()
{

fillCombo(document.forms.myMenus.mainMenu,mainOpt)
fillCombo(document.forms.myMenus.mainBox,mainOpt)
Click to expand...
Incorrect here-------------------------^^------^^^
should be:

fillCombo(document.forms.myMenus.subMenu,subOpt[0]);

to fill the second SELECT "subMenu" with the 1st array "subOpt[0]" upon
initialization.

}

function fillCombo(cmbBox,aryMenu)
{
cmbBox.length = 0 // Clear out the current options
for (menuOpt in aryMenu)
{
cmbBox.options[cmbBox.length] = new
Option(aryMenu[menuOpt],cmbBox.length)
}
//Show first item if it is a drop down
cmbBox.selectedIndex=0
}
//-->
</script>

<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#FF0000" onload="init()">
<center>
<form name=myMenus>
<br>an example<br><br>
<!-- do select template for older browsers, some
can't change size dynamically -->
<select name=mainMenu
onchange="fillCombo(subMenu,subOpt[this.selectedIndex])">
Click to expand...
-------------------------^^^
should pass the complete reference to the SELECT object:

onchange="fillCombo(this.form.subMenu, subOpt[this.selectedIndex]);


<option>
<option>
<option>
<option>
<option>
<option>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</select><br><br>
<select name=subMenu>
<option>
<option>
<option>
<option>
<option>
<option>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</select>
<br>
</form>
</center>
</BODY>
</HTML>
Click to expand...

Probably more but that is what I found on quick examination.
 
N

Neil Monk

Beauregard T. Shagnasty said:
I don't do JavaScript, but while we're here...


9pt? Points are for printing. Many people won't be able to read that,
and may not be able to resize it in some browsers. Set your font-size to
100%.

http://www.xs4all.nl/~sbpoley/webmatters/fontsize.html
http://www.xs4all.nl/~sbpoley/webmatters/verdana.html
Click to expand...
<snip>

Thanks for your comments. Again, this is not relevent to my project. If this
was for a "proper" website (as in to go on the WWW, and be used
cross-browser, then yes, I'd agree).

Thanks for your comments.
 
N

Neil Monk

Jonathan N. Little said:
Further to my earlier post, I've found something that does partly what
I'm doing, but there are two issues:
Click to expand...


The reason you did not get a satifactory response is that most feel that
what your are attempting is a 'bad idea'. But in the matter of JavaScript
(which must be enabled for the form to work, the other bad idea) you have
some obvious errors which I will show to you, educational and all.
1) There is an error in the script. Being a Javascript newbie, I've no
idea what the problem is.

2) I don't know how to re-program the script so that it opens up a url
depending on the choices made.

Here is the code (thanks Google!), I'd appreciate any help the you can
give.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
Click to expand...

Ugh, please look up doctype. This is ancient.
<HTML>
<HEAD>
<TITLE>Dynamic Dropdown Boxes</TITLE>
<META NAME="Generator" CONTENT="TextPad 3.0">
<META NAME="Author" CONTENT="Heidi Housten">
</HEAD>


<style>
body,table,td {font-family:verdana; font-size:9pt}
select {width:130;font-family:verdana}
pre { font-size:9pt }
</style>
Click to expand...

Next although ending JavaScript statements with a ';' is optional I
recommend it because is prevents errors when a single statement spans more
than on line. Also your can gang more than one statement on a single line:
var aOpt=new Array; var oMine=new Object;
<script language=javascript>
<!--
mainOpt = new Array()
subOpt = new Array()
mainOpt[0] = "How to relax"
subOpt [0] = new Array("","","")
mainOpt[1] = "Hot Spots"
subOpt [1] = new Array("Pick a Hot Spot","Mojave","Mars","Death
Valley","Mt. St. Helens")
mainOpt[2] = "Festivals"
subOpt [2] = new Array("Which One?","Mardi Gras","Cinco de
Mayo","Midsummer","Kite Festival")
mainOpt[3] = "Good Books"
subOpt [3] = new Array("Which Book?","N is for Noose","Four to
Score","A Grave Talent","Six of One")
mainOpt[4] = "Holidays"
subOpt [4] = new Array("Choose
Holiday","Cruises","Safaris","Ballooning","Adventures")
function init()
{

fillCombo(document.forms.myMenus.mainMenu,mainOpt)
fillCombo(document.forms.myMenus.mainBox,mainOpt)
Click to expand...
Incorrect here-------------------------^^------^^^
should be:

fillCombo(document.forms.myMenus.subMenu,subOpt[0]);

to fill the second SELECT "subMenu" with the 1st array "subOpt[0]" upon
initialization.

}

function fillCombo(cmbBox,aryMenu)
{
cmbBox.length = 0 // Clear out the current options
for (menuOpt in aryMenu)
{
cmbBox.options[cmbBox.length] = new
Option(aryMenu[menuOpt],cmbBox.length)
}
//Show first item if it is a drop down
cmbBox.selectedIndex=0
}
//-->
</script>

<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#FF0000" onload="init()">
<center>
<form name=myMenus>
<br>an example<br><br>
<!-- do select template for older browsers, some
can't change size dynamically -->
<select name=mainMenu
onchange="fillCombo(subMenu,subOpt[this.selectedIndex])">
Click to expand...
-------------------------^^^
should pass the complete reference to the SELECT object:

onchange="fillCombo(this.form.subMenu, subOpt[this.selectedIndex]);


<option>
<option>
<option>
<option>
<option>
<option>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</select><br><br>
<select name=subMenu>
<option>
<option>
<option>
<option>
<option>
<option>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</select>
<br>
</form>
</center>
</BODY>
</HTML>
Click to expand...

Probably more but that is what I found on quick examination.
Click to expand...
<snip>
Cheers Jonathan, I'll take a look when I get back in the office.
 
B

Beauregard T. Shagnasty

Neil said:
Thanks for your comments. Again, this is not relevent to my project.
If this was for a "proper" website (as in to go on the WWW, and be
used cross-browser, then yes, I'd agree).
Click to expand...

I did not notice in your original post where you said this was not a WWW
page. We normally assume WWW unless you state otherwise, such as "this
is for an intranet" and maybe even "all my users are slaves to IE." Or
similar.
Thanks for your comments.
Click to expand...

Hopefully, every user of your intranet has perfect vision? :)
 
N

Neil Monk

Beauregard said:
I did not notice in your original post where you said this was not a
WWW page. We normally assume WWW unless you state otherwise, such as
"this is for an intranet" and maybe even "all my users are slaves to
IE." Or similar.
Click to expand...

Unfortunatley they are all slaves to IE, only I have FF installed.
Hopefully, every user of your intranet has perfect vision? :)
Click to expand...


That is correct, well, not all of the hundreds of thousands of people in my
company, but the 10-15 people that would be using this, yes they have..
 
F

firstcustomer

Cheers Jonathan.

How do I get it to go to a url now? Can you help me with that too
please?

TIA, Neil.
 
J

Jonathan N. Little

Cheers Jonathan.

How do I get it to go to a url now? Can you help me with that too
please?

TIA, Neil.
Click to expand...
Please quote what you are referring to.

To do that you will need a third synchronized array of URLs for your
subOpt array where upon what is selected with subMenu you could set the
document's location to that URL.

Google 'javascript location object'
 
F

firstcustomer

Jonathan said:
Please quote what you are referring to.

To do that you will need a third synchronized array of URLs for your
subOpt array where upon what is selected with subMenu you could set the
document's location to that URL.

Google 'javascript location object'
Click to expand...


Sorry, I was using the wrong option (I use USENET via Google Groyups
when I'm at work).

I'll have a look at what you've said.
 
F

firstcustomer

Jonathan said:
I don't use GG but I know from all the complaints that there is a
setting to do proper quoting. I think Blinky has a reference to it on
his site:

http://blinkynet.net/comp/uip5.html
The Usenet Improvement Project - Blinkynet
Click to expand...

There is indeed. I've found it now!

Still not got it (my form) work, I know next to nothing about
Javascript hence my problems. I've googled like you suggested, but I
can't find an example of what I need.
 
J

Jonathan N. Little

Still not got it (my form) work, I know next to nothing about
Javascript hence my problems. I've googled like you suggested, but I
can't find an example of what I need.
Click to expand...

Aw c'mon Neil! The first results page in Google for the three search
words 'javascript location object' all yielded valid pages on how to use
the location object. You have do a little work for yourself ;-)
 
F

firstcustomer

Jonathan said:
Aw c'mon Neil! The first results page in Google for the three search
words 'javascript location object' all yielded valid pages on how to use
the location object. You have do a little work for yourself ;-)
Click to expand...
The only problem Jonathan, is that I know next to nothing about
Javascript, so the pages that I found mean nothing to me...
 
J

Jonathan N. Little

Jim said:
Jonathan N. Little wrote:


http://www.google.com/search?hl=en&q=javascript+tutorial&btnG=Google+Search


Or, even:

javascript:location.replace("http://www.google.com/search?q=javascript+tutorial")

If you are using a Javascript-enabled browser to read this, and the portal
you're reading on linkifies all URLs (not just the http ones), clicking
that *may* just work.

If not, well, that shows the problems with using javascript for core
functionality.
Click to expand...

I (and others) have warned the OP of the problem of his reliance on
JavaScript in his design however he is committed to this strategy. I
have answered his questions with the footnote that although it is
possible to do with JavaScript, server-side is a far better solution.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

using refresh to reload page, problem is it loads header, footer andeverything, can I avoind those t 8
Multi select options in a menu 1
How do I get the if statement correct in the lines that has it in the program? 2
I dont get this. Please help me!! 2
action_page.php form 2
Need help , Having problem with Drag n Drop ? 9
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
Help with my responsive home page 2

Members online

No members online now.
Total: 23 (members: 0, guests: 23)
Robots: 504

Forum statistics

Threads
473,769
Messages
2,569,579
Members
45,053
Latest member
BrodieSola

Latest Threads

Top