PDA

Click to See Complete Forum and Search --> : window.open, _self & buttons

adamcollis
08-01-2003, 04:23 AM
I've got 2 javascript functions to provide different ways of opening windows. One opens a pop-up window, the other navigates to a new URL within the existing window.

I'm combining these with a drop down box and a 'switch' function (case statement) in order to allow users to navigate to new pages. I would like to use a drop down box with a 'Go' button - it works when opening pop up windows but not when navigating to a new URL. Can anyone figure out why?

The code is below.... (you'll see the bit that doesn't work when the 'North Region' is selected)


<html>

<head>
<meta http-equiv="Content-Language" content="en-gb">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Drop Down Boxes (hard coded)</title>

<script type="text/javaScript">
<!--
<!-- This script opens a new window of defined size
function openWindow(url, name, width, height)
{window.open(url, name, 'width=' + width + ',height=' + height +
', left=20,top=50,toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=1,resizable=1')
}
<!--
<!-- This script replaces the existing window with a new window
function changeWindow(url)
{window.open(url, '_self')}
<!--
<!-- This script determines which window to choose based on the selection
function selectpopup(selectedregion)
{ var newregion=document.regionselect.selectedregion.options[document.regionselect.selectedregion.selectedIndex].value
switch (newregion)
{ case "north" :
<!-- openWindow('RegionN.htm', 'N_Region',200,400)
changeWindow('RegionN.htm')
break;
case "south" :
openWindow('RegionS.htm', 'S_Region',200,400)
break;
case "east" :
openWindow('RegionE.htm', 'E_Region',200,400)
break;
case "west" :
openWindow('RegionW.htm', 'W_Region',200,400)
break;
default :
break;
}
}
<!--
<!-- This script determines which window to choose based on the selection
function selectnewwin(selectedseason)
{ var newseason=document.seasonselect.selectedseason.options[document.seasonselect.selectedseason.selectedIndex].value
switch (newseason)
{ case "spring" :
changeWindow('spring.htm')
break;
case "summer" :
changeWindow('summer.htm')
break;
case "autumn" :
changeWindow('autumn.htm')
break;
case "winter" :
changeWindow('winter.htm')
break;
default :
break;
}
}
//-->
</script>
</head>
<BODY OnLoad="selectpopup(selectedregion)">

<p>Here's a drop down box that is activated when you change the value....</p>
<FORM name="seasonselect">
<p>
<SELECT name="selectedseason" onChange="selectnewwin(selectedseason)">
<option value="selected" selected>Select a season
<OPTION VALUE="spring">Spring
<OPTION VALUE="summer">Summer
<OPTION VALUE="autumn">Autumn
<OPTION VALUE="winter">Winter
</SELECT> </p>
</FORM>

<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Here's a drop down box that requires you to hit GO....</p>
<FORM name="regionselect">
<SELECT name="selectedregion">
<option value="selected" selected>Select a region
<OPTION VALUE="north">North
<OPTION VALUE="south">South
<OPTION VALUE="east">East
<OPTION VALUE="west">West
</SELECT>
<input type="submit" value="Go" onClick="selectpopup(selectedregion)">
</FORM>

<p>&nbsp;</p>

</body>

</html>
Nevermore
08-01-2003, 06:46 AM
Here's some code for what it sounds like you are doing:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Drop down box navigation</title>
<script type="text/javascript">
<!--
uris=new Array('1.html','2.html','3.html','4.html','5.html');
width=400;
height=400;
function openinnew() {
indexn=document.navform.navbox.selectedIndex;
newwin=window.open(uris[indexn], name, 'width=' + width + ',height=' + height +', left=20,top=50,toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=1,resizable=1')
}
function openinsame() {
indexn=document.navform.navbox.selectedIndex;
document.location.href=uris[indexn];
}
// -->
</script>
</head>
<body>

<form name="navform">
<select name="navbox">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
</select><input type="button" value="Go!" onclick="openinsame()"/><input type="button" value="New Win" onclick="openinnew()"/>
</form>

</body>
</html>


To add new URLs just add their name to the drop down box and the path to the page to the array (in red). These paths must be in order, and in quotation marks or inverted commas. Then just change the width and height.

Any use?