Faqts : Computers : Programming : Languages : JavaScript

+ Search
Add Entry AlertManage Folder Edit Entry Add page to http://del.icio.us/
Did You Find This Entry Useful?

6 of 15 people (40%) answered Yes
Recently 4 of 10 people (40%) answered Yes


How do I send a specific .html document to a target frame when choosing a new select option ?

Apr 5th, 2008 20:34
ha mo, Carlos Gómez, Colin Fraser, Andrew Lord,

I think this is what the question asks, it is simple navigation stuff 
<<added note: this does not answer the question. In effect, this 
answer allow to change the page *in the browser*, *but* it does not 
allow the new page to appear *in a specific target frame*, which was 
the object of the question, as I can understand it. Unfortunately I 
can not complete it, as I am also looking for this answer too.>>
This select list represents a navigation menu which consists of two
parts, the function and the form. The form first: 
<form>A Navigation Menu
<select name="nextLoc" onChange="goPage(this.form.nextLoc)">
<option value="" SELECTED>Select a topic
<option value="index.htm">Discovering The City
<option value="page01.htm">Theatres and Cinemas
<option value="page02.htm">Hotels and Motels
<option value="page03.htm">Dinning Out
Explaining the form
<form>A Navigation Menu 
Opening the form and providing a caption 
<select name="nextLoc" onChange="goPage(this.form.nextLoc)"> 
Creates the select list and gives it a name. The onChange event traps
the event used to trigger the goPage() function. The
"goPage(this.form.nextLoc)" is the call to the function goPage() 
<option value="" SELECTED>Select a topic 
The default option of the select list has no value to pass to the 
<option value="index.htm">Discovering the City 
The list value, index.htm, but this is any selected value, becomes the
value of this.form.nextLoc to be passed to the function. 
The function is pretty much the same as other functions : 
function goPage(newLoc) {
if (newLoc.options[newLoc.selectedIndex].value != "") {
	location.href= newLoc.options[newLoc.selectedIndex].value
}      //if
else {
	alert("Please select another topic")
}      //else
}      //function 
Explaining the function 
The important elements of the function are : 
if (newLoc.options[newLoc.selectedIndex].value != "") 
The if statement uses the value of selectedIndex of the form to
determine if a value greater than 0 is there. The value is passed to 
function as the parameter newloc. (The name of the form in this 
is not entirely irrelevant, but it is not as important as it may be in
other circumstances.) 
location.href= newLoc.options[newLoc.selectedIndex].value 
If the value is greater than 0, as there are 7 possible values, the
value is passed to the href property of the location object. It is this
object that controls what page is viewed in the browser.