Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Using Drop Down Menu to Change Frames

Status
Not open for further replies.
sunsetbay

sunsetbay

Technical User
Aug 5, 2002
19
AU
Hi All,

I am new to javascript but I need to do something like that and I know it's pretty simple. I have a drop down menu consist of three selections - Type of Covers, Agegroup, Name of Products.

The drop down is in the top frame and say for example when users select "Type of Covers" then the bottom frame will change to "cc.html". Then when the user select "Agegroup", the bottom frame will now change to "Age.Html" Then vice versa.

I hope someone can direct me to a useful link so that I can work this out! Cheers

Yennie

~~I live to die and Die to Live~~
 
Sort by date Sort by votes
Change the location property of your frame to whatever value was selected:
Code: 
<select onChange="document.frames.myframe.location=this.value;">
<option value="cc.html">Covers</option
<option value="Age.html">Agegroup</option>
</select>

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Upvote 0 Downvote
Hi there,

I currently wrote this piece of code and have two questions

this page is actually part of a html page with three frames. And when the user select the options, i am hoping to output to a bottom frame say for example target="bottom" I suppose?

Also how can i add an extra "submit" button so that it will only bring the user to a new page after they click submit?

<html>
<head>
<script type="text/javascript">
function go() {
window.location=document.getElementById("menu").value;}
</script>
</head>
<body>
<form>
<select id="menu" onchange="go()">
<option>--Select a page--</option>
<option value="results.html">Type of Cover</option>
<option value="age.html">Age</option>
</select>
</form>
</body>
</html>

~~I live to die and Die to Live~~
 
Upvote 0 Downvote
this page is actually part of a html page with three frames. And when the user select the options, i am hoping to output to a bottom frame say for example target="bottom" I suppose?
Click to expand...
Don't use window.location, instead use the location property of the frame you wish to target.

parent.frames.[red]bottom[/red].location=document.getElementById("menu").value;


Also how can i add an extra "submit" button so that it will only bring the user to a new page after they click submit?
Click to expand...

Use the submit button's onClick event instead of the dropdown's OnClick event.

Code: 
<select id="menu">
...
</select>
<input type=submit value="Go" onClick="Go();">



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Upvote 0 Downvote
Hi Phil,

thank you so much for your help. Really do appreciate this.

this is my script so far.

<html>
<head>

<script type="text/javascript">
function go()
{parent.frames.bottom.location=document.getElementById("menu").value;}
</script>
</head>

<body>
<form>
<p><b> Motor Insurance > GIO > Claims > <u>Type of Motocycle</u></b> > ???????? </p>
Select the Inforce Period to be Generated :
<select id="menu">
<optgroup label="--- Period ---">

<option value="gio_claims_cc_three.html">Last Three Months</option>
<option value="gio_claims_cc_six.html">Last Six Months</option>
<option value="GIO_claims_cc_twelve.html">Last Twelve Months</option>
<option value="GIO_claims_cc_twoyears.html">Last Two Years</option>
<option value="GIO_claims_cc_threeyears.html">Last Three Years</option>


</select>
<input type=submit value="View Results" onClick="go();">
</form>
</body>
</html>

What I am thinking as well is that on "??????" as above, i would like "??????" to be reflected as what the user choose in the drop down menu. so say if user select three months then "?????" will become Last Three Months or vice versa.

Just wondering how do I do that?

~~I live to die and Die to Live~~
 
Upvote 0 Downvote
You could surround it with a <span> tag and alter its innerHTML property.

Code: 
<script>
function go(){
var dropdown=document.getElementById("menu").value;
document.getElementById('myspan').innerHTML=dropdown.options[drodown.selectedIndex].text;

}</script>
<span id="myspan">Value Here</span>

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Upvote 0 Downvote
I am not sure if this is right?

<html>
<head>

<script type="text/javascript">
function go()
{parent.frames.bottom.location=document.getElementById("menu").value;}

{var dropdown=document.getElementById("menu").value;
document.getElementById('myspan').innerHTML=dropdown.options[dropdown.selectedIndex].text;}

</script>
</head>

<body>
<form>
<p><b> Motor Insurance > GIO > Claims > <u>Type of Motocycle</u></b> ><span id="myspan">value</span></p>
Select the Inforce Period to be Generated :
<select id="menu">
<optgroup label="--- Period ---">

<option value="gio_claims_cc_three.html">Last Three Months</option>
<option value="gio_claims_cc_six.html">Last Six Months</option>
<option value="GIO_claims_cc_twelve.html">Last Twelve Months</option>
<option value="GIO_claims_cc_twoyears.html">Last Two Years</option>
<option value="GIO_claims_cc_threeyears.html">Last Three Years</option>

</select>
<input type=submit value="View Results" onClick="go();">
</form>
</body>

</html>

~~I live to die and Die to Live~~
 
Upvote 0 Downvote
Dan is right, try it and find out.

But I would of course make sure the code in question belongs to the function you are calling.

Your go() function seems to end right after you change the location of the frame, and then you arbitrarily decide to have 2 lines of code surrounded by brackets which belong to nothing.

I suggest you look at basic Javascrpt tutorials, if only to learn the coding basics.

Try putting those lines of code between the brackets that belong to your go() function.


----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

trevil620
  • Locked
  • Question
SoThink DHTML Menu Conversion
Replies
0
Views
262
trevil620
trevil620
nanbread
  • Locked
  • Question
Sweeping drop-down menus
Replies
0
Views
247
nanbread
nanbread
Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
357
Kennelbloke
Kennelbloke
TheLazyPig
  • Locked
  • Question
Dropdown (option) using Anguarjs
Replies
0
Views
261
TheLazyPig
TheLazyPig
lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
293
lexer
lexer

Part and Inventory Search

Sponsor

Back
Top