PDA

View Full Version : calling a option box value, not as easy as it seems ??

chris_angell
05-20-2003, 03:37 PM
Hello I have a probem, that I can't work out..

I have a dropdown box and I am trying to return the id or name of the option box so it can tell my code which window to open, open window 1 or 2 ?? but when it looks for the id it come up with no value.. how come..

function openSNAPS() {
if (links.SNAPSdropdown.options.id == 'landscape') {
var v = document.links.SNAPSdropdown[document.links.SNAPSdropdown.selectedIndex].value;
window.open('snaps/LGsnaps/' + v + '.htm','snaps','width=400,height=255');
}
else {
window.open('snaps/LGsnaps/' + v + '.htm','snaps','width=255,height=400');
}
}

it should be looking for the id, I have tried to make it look for other values like height and bgcolor but it always come back with nothing, apart from if I change the id to value, then it returns with the value of the specific option box ???? but the value has a use so I can't use this



any help
sage45
05-20-2003, 05:16 PM
Try this:


function openSNAPS() {
var chk=document.links.SNAPSdropdown.selectedIndex;
var v=document.links.SNAPSdropdown.options[document.links.SNAPSdropdown.selectedIndex].value;
if (chk == 0) {
window.open('snaps/LGsnaps/' + v + '.htm','snaps','width=400,height=255');
}
else {
window.open('snaps/LGsnaps/' + v + '.htm','snaps','width=255,height=400');
}
}

Or if you want to trim it down a little you can do this:

function openSNAPS() {
var v=document.links.SNAPSdropdown.options[document.links.SNAPSdropdown.selectedIndex].value;
if (document.links.SNAPSdropdown.selectedIndex == 0) {
window.open('snaps/LGsnaps/' + v + '.htm','snaps','width=400,height=255');
}
else {
window.open('snaps/LGsnaps/' + v + '.htm','snaps','width=255,height=400');
}
}

HTH,

-sage-
chris_angell
05-20-2003, 05:38 PM
what does selectedIndex == 0 mean

??? hmm it looks good, but what I need to do is place a value within the option tag so the javascript will open in landscape or portrait . ? will this do it, does the 0 stand for false


sorry to appear slow.. but I am a little confused
sage45
05-20-2003, 07:42 PM
No problem...

First both scripts will accomplish the same thing, the second one is just trimmer so that you dont have to write more code...

Now using the second one as my example:


// this first line opens the function and names it openSNAPS
function openSNAPS() {

// this second line assigns the value of the selected option based
// on the selected index - SNAPSdropdown - and assigns it to a
// variable named v... The option value is given in a line like this:
// <option value="one1">
var v=document.links.SNAPSdropdown.options[document.links.SNAPSdropdown.selectedIndex].value;

// this next line takes the value of the selectedIndex, if the value
// equals 0 then it opens the window... If the value is not 0,
// then it opens the window in the else statement
if (document.links.SNAPSdropdown.selectedIndex == 0) {

// this window will open if the selectedIndex is eqaul to 0
window.open('snaps/LGsnaps/' + v + '.htm','snaps','width=400,height=255');
}
else {

// this window will open if the selectedIndex is equal to 1
window.open('snaps/LGsnaps/' + v + '.htm','snaps','width=255,height=400');
}
}


Now with what I wrote in mind... If you were to take and create a drop down list with Landscape and Portrait as your two options, i.e. --


<HTML>
<head>
<title></title>
<script>
function openSNAPS() {
var v=document.links.SNAPSdropdown.options[document.links.SNAPSdropdown.selectedIndex].value;
if (document.links.SNAPSdropdown.selectedIndex == 0) {
window.open('snaps/LGsnaps/' + v + '.htm','snaps','width=400,height=255');
}
else {
window.open('snaps/LGsnaps/' + v + '.htm','snaps','width=255,height=400');
}
}
</script>
</HEAD>
<form name="links">
<select name="SNAPSdropdown">
<option value="landscapepage">Landscape
<option value="portraitpage">Portrait
</select>
<INPUT type="button" name="Start" value="Go!" onClick="javascript:openSNAPS();">
</form>
</HTML>


When the client would select the default, the script will take two values from the selection, first it will take the selectedIndex which is "0" and second it will take the option value which is "landscapepage"... If the client selected Portrait, your values would be "portraitpage" and "1" respectively... Since you only have two options, you only need to check for the selectedIndex of one...

To help with your understanding of selected index and options, paste this code into a .htm file and open it...


<HTML>
<head>
<title></title>
<script>
function chg() {
var exeLine='document.test.te1.value=document.test.se1.selectedIndex'
eval(exeLine)
var exeLine='document.test.te2.value=document.test.se1.options.value'
eval(exeLine)
var exeLine='document.test.te3.value=document.test.se1.options[document.test.se1.selectedIndex].value'
eval(exeLine)
}
</script>
</HEAD>
<form name="test">
<TABLE>
<TR>
<TD VALIGN="TOP"><select name="se1">
<option value="one1">one
<option value="two2">two
<option value="three3">three
</select>
<INPUT type="button" name="Start" value="Go!" onClick="javascript:chg();">
</TD>
<TD VALIGN="TOP"><INPUT TYPE="TEXT" SIZE="30" MAXLENGTH="50" NAME="te1" onFocus="this.blur();"><BR>
<INPUT TYPE="TEXT" SIZE="30" MAXLENGTH="50" NAME="te2" onFocus="this.blur();"><BR>
<INPUT TYPE="TEXT" SIZE="30" MAXLENGTH="50" NAME="te3" onFocus="this.blur();">
</TD>
</TR>
</TABLE>
</form>
</HTML>


HTH,

-sage-
HairyTeeth
05-20-2003, 11:02 PM
To expand on what sage has said, you also need to consider window management.
It's possibleto spawn multiple instances of the same window and really annoy the user
when they have to close 10 popups or search around the taskbar looking for the right window.

The typical way around this is to ask:
(a) if that particular window does not exist
or
(b) if that particular window is closed.
... open a new window
...else (its open), so give it focus()
(ie. bring it to the front of all other windows).

Adapting your code:

<html>
<head>
<title>Untitled</title>

<script type="text/javascript" language="javascript">
<!--;

var landscapePop = null;
var portraitPop=null;

function openSNAPS(f) {
var v=f.SNAPSdropdown.options[f.SNAPSdropdown.selectedIndex].value;
var page="snaps/LGsnaps/" + v + ".htm";
var windowFeatures="";

switch(v){
case "landscapepage":
windowFeatures = "width=400,height=255";
if(!landscapePop || landscapePop.closed){
landscapePop=window.open(page,'landscapeSnap',windowFeatures);
}else{
landscapePop.focus();
}
break;

case "portraitpage":
windowFeatures="width=255,height=400";
if(!portraitPop || portraitPop.closed){
portraitPop=window.open(page,'portraitSnap',windowFeatures);
}else{
portraitPop.focus();
}
break;

default:
break;
}
}

//-->
</script>
</head>
<body>

<form name="frmLinks">
<select name="SNAPSdropdown">
<option value="" selected="selected">Choose...</option>
<option value="landscapepage">Landscape</option>
<option value="portraitpage">Portrait</option>
</select>
<INPUT type="button" name="Start" value="Go!" onClick="javascript: openSNAPS(this.form);" />
</form>

</body>
</html>


The switch statement is the same as an if...else contruction.

if(v=="landscapepage"){
//do this
}else if(v=="portraitpage"){
//do something else
}else{
// do something else
// if none of those are true
}


which equates to...

switch(v){
case "landscapepage":
//do this
case "portraitpage":
//do something else
default:
// do something else
// if none of those are true
}

Those who know better than me say that switch is more efficient at execution.
I like the way it is set out. But, it isnt available to version 2 or 3 browsers.
In that case you have to use an if...else construct.

Anyway, try out the above code and see how it goes.
sage45
05-21-2003, 03:31 AM
Nice one... :)

-sage-