Web Development

3-Aug-03 0:35

I have several select boxes on a form. what i want is, to make open a new window when the user chooses the same option from any one of the select boxes. so for example, select1 has 4 options, select2 has 4 options etc. The 4th option is "other". If user selects "other" in any drop down list then it will open a window. what i cant work out is, how to reference all the selectboxs with one function rather than several smaller functions. This is as far as i got.

Help is most appreciated....

function other() {
var selIndex = document.formName.selectName.selectedIndex;
var optText = document.formName.selectName.options[selIndex].text;
if(optText=="Other"){
window.open('form.htm','','top=20,width=200, height=200');
}
else {
return false;
}

}

thanks in anticipation

Richard Deeming4-Aug-03 4:03

4-Aug-03 4:03

Try something like:

function other(cbx)
{
    if (!cbx || "undefined" == typeof(cbx.options)) return false;
    var selIndex = cbx.selectedIndex;
    var optText = cbx.options[selIndex].value;
    if ("other" == optText)
    {
        window.open("form.htm", "top=20,width=200,height=200");
        return true;
    }
    else
    {
        return false;
    }
}
...
<select size="1" name="SelectList1" onchange="other(this);">
    <option>(Select One)</option>
    <option value="other">Other...</option>
</select>

"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

skizzly4-Aug-03 7:23

4-Aug-03 7:23

thank you for the help.

can you explain line 1 of function, newbie to all this.

thanks again

skizzly

Richard Deeming4-Aug-03 9:02

4-Aug-03 9:02

Line 1 simply says that if you don't pass in a value, or the object you pass in doesn't have a property called options, the function will return immediately.

"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

skizzly4-Aug-03 9:09

4-Aug-03 9:09

thanks for the help, u sure know ur stuff.

thanks for help

skizzly

skizzly6-Aug-03 1:50

6-Aug-03 1:50

added function to the page, but unfortunately it does nothing! any ideas...

there are several groups of select boxs in the form. is it that i have to refer to the ones i want directly, for the function to work???

Richard Deeming6-Aug-03 2:29

6-Aug-03 2:29

Did you update your select boxes to pass this as the argument to the function?

The following page works perfectly in Internet Explorer and Mozilla Firebird:

<html>
<head>
    <title>Testing</title>
    <script language="javascript" type="text/javascript">
    <!--
    function other(cbx)
    {    
        if (!cbx || "undefined" == typeof(cbx.options)) return false;    
        var selIndex = cbx.selectedIndex;    
        var optText = cbx.options[selIndex].value;    
        if ("other" == optText)    
        {        
            window.open("form.htm", "", "top=20,width=200,height=200");        
            return true;    
        }    
        else    
        {        
            return false;    
        }
    }
    //-->
    </script>
</head>
<body>
    <select size="1" name="SelectList1" onchange="other(this);">    
        <option>(Select One)</option>
        <option>Item 1</option>
        <option>What?</option>
        <option value="other">Other...</option>
    </select>
    <br />
    <select size="1" name="SelectList2" onchange="other(this);">    
        <option>(Select One)</option>
        <option>Item 2</option>
        <option>Another item</option>
        <option value="other">Other...</option>
    </select>
</body>
</html>

"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

skizzly6-Aug-03 3:46

6-Aug-03 3:46

Here is the code i used for the select box, identiifying the funtion. I followed to the letter your function but it wont do anything once the option "other" is selected.

When I do the function without the rest of my form and just the select boxes, the function works fine, but when added to my form it seems not to work.... do you think it has something to do with the cbx parameter?

<select name="issues" multiple class="width" onChange="other(this);"><br />
                    <option class="header2">GP</option><br />
                    <option> </option><br />
                    <option value="Communication/Attitude">Communication/Attitiude</option><br />
                    <option value="Appointment System">Apointment System</option><br />
                    <option value="Unable to Access treatment">Unable to Access <br />
                    treatment</option><br />
                    <option value="Premises/environment">Premises/environment</option><br />
                    <option value="Failiure to visit">Failure to vist</option><br />
                    <option value="Practice staff">Practice staff</option><br />
                    <option value="`Failiure to diagnose">Failiure to SDiagnose</option><br />
                    <option value="Other">Other</option><br />
                  </select>

Richard Deeming6-Aug-03 4:01

6-Aug-03 4:01

The first issue is the case of the value - the function is looking for "other", in lower case. The second issue is the fact that your list allows multiple selection - the selectedIndex will only return the first selected item.

Try changing the function to:

function other(cbx)
{
    if (!cbx || "undefined" == typeof(cbx.options)) return false; 
    
    var selOther = false;
    for(var i = 0; i < cbx.options.length; i++)
    {
        var opt = cbx.options[i];
        if (opt.selected && "other" == opt.value.toLowerCase())
        {
            selOther = true;
            break;
        }
    }
    
    if (selOther)
    {
        window.open("form.htm", "", "top=20,width=200,height=200");
        return true;    
    }
    else
    {
        return false;    
    }
}

"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

skizzly12-Aug-03 2:00