Javascript selectedIndex problem in Firefox

April 6th, 2007, 8:03 am

I'm having a problem getting the selected index of a select field in with Javascript
I believe the error is occurring on the line where I get the selectedIndex. The actual code along with the debug code work fine in IE, and I'm sure I can use the selected index function in FF. Does anybody know what is going on?

Here's the code I am using to debug it:

Code: [ Download ] [ Select ]

function generate_url(){
        var url;
        url = '?{url}filter=';
        alert(1+url);
        url += document.getElementById('filter').selectedIndex;
        alert(2+url);
        url += '&expression='
        alert(3+url);
        url += document.getElementById('expression').value;
        alert(4+url);
        
        return url;
    }

1. function generate_url(){
2.         var url;
3.         url = '?{url}filter=';
4.         alert(1+url);
5.         url += document.getElementById('filter').selectedIndex;
6.         alert(2+url);
7.         url += '&expression='
8.         alert(3+url);
9.         url += document.getElementById('expression').value;
10.         alert(4+url);
11.         
12.         return url;
13.     }

Here is the actual line of code:

Code: [ Download ] [ Select ]

<input type = "button" value = "Apply Filter" onclick = "validate_expression(document.getElementById('expression').value) ? window.location.href = '?{url}filter=' + document.getElementById('filter').selectedIndex + '&amp;expression=' + document.getElementById('expression').value : alert('You have entered an invalid expression');"/>

April 6th, 2007, 8:47 am

can u put the rest of the code, it looks incomplete here, cant test.

April 6th, 2007, 8:51 am

selected index is accomplished this way:
(document.getElementById('filter')).options[selectedIndex].value

April 6th, 2007, 8:59 am

And how do I determine the value for selectedIndex?

What you are trying to do is get the value for the currently selected item in the select field (basically this: document.getElementById('filters').options[document.getElementById('filters').selectedIndex].value)

All I need is the index of the selected item.


And here is the complete code from the page, though there isn't much more then what I already posted...

Code: [ Download ] [ Select ]

<script>
//<![CDATA[
    function validate_expression(expression){
        var invalid = new Array('=', '\'', '"');
        
        for(var i = 0; i < invalid.length; i++)
            if(expression.indexOf(invalid[i]) != -1)
                return false;
        
        return true;
    }
    
    function generate_url(){
        alert('infunc');
        alert(document.getElementById('filter').selectedIndex);
        
        var url;
        url = '?table=Hardware&filter=';
        alert(1+url);
        url += document.getElementById('filter').selectedIndex;
        alert(2+url);
        url += '&expression='
        alert(3+url);
        url += document.getElementById('expression').value;
        alert(4+url);
        
        return url;
    }
//]]>
</script>
<div style = "background-color: #FFFFFF; border: 1px solid #000000; padding: 5px;">
    Where:
    <select name = "filter">
        <option>regex</option>
        <option>mysql</option>
    </select>
    &nbsp;
    :
    &nbsp;
    <input name = "expression" id = "expression" type = "text" style = "width: 400px;" value = "manufacturer>D[[:alpha:]]L;model>Lat*"/>
    &nbsp;

    <!--PROBELM OCCURS HERE-->
    <input type = "button" value = "Apply Filter" onclick = "validate_expression(document.getElementById('expression').value) ? window.location.href = '?table=Hardware&filter=' + document.getElementById('filter').selectedIndex + '&amp;expression=' + document.getElementById('expression').value : alert('You have entered an invalid expression');"/>
    &nbsp;
    <input type = "button" value = "Clear" onclick = "document.getElementById('expression').value = ''"/>
</div>

1. <script>
2. //<![CDATA[
3.     function validate_expression(expression){
4.         var invalid = new Array('=', '\'', '"');
5.         
6.         for(var i = 0; i < invalid.length; i++)
7.             if(expression.indexOf(invalid[i]) != -1)
8.                 return false;
9.         
10.         return true;
11.     }
12.     
13.     function generate_url(){
14.         alert('infunc');
15.         alert(document.getElementById('filter').selectedIndex);
16.         
17.         var url;
18.         url = '?table=Hardware&filter=';
19.         alert(1+url);
20.         url += document.getElementById('filter').selectedIndex;
21.         alert(2+url);
22.         url += '&expression='
23.         alert(3+url);
24.         url += document.getElementById('expression').value;
25.         alert(4+url);
26.         
27.         return url;
28.     }
29. //]]>
30. </script>
31. <div style = "background-color: #FFFFFF; border: 1px solid #000000; padding: 5px;">
32.     Where:
33.     <select name = "filter">
34.         <option>regex</option>
35.         <option>mysql</option>
36.     </select>
37.     &nbsp;
38.     :
39.     &nbsp;
40.     <input name = "expression" id = "expression" type = "text" style = "width: 400px;" value = "manufacturer>D[[:alpha:]]L;model>Lat*"/>
41.     &nbsp;
43.     <!--PROBELM OCCURS HERE-->
44.     <input type = "button" value = "Apply Filter" onclick = "validate_expression(document.getElementById('expression').value) ? window.location.href = '?table=Hardware&filter=' + document.getElementById('filter').selectedIndex + '&amp;expression=' + document.getElementById('expression').value : alert('You have entered an invalid expression');"/>
45.     &nbsp;
46.     <input type = "button" value = "Clear" onclick = "document.getElementById('expression').value = ''"/>
47. </div>

'generate_url()' is never actually called, I just created it to debug the 'onclick' attribute in the 'Apply Filter' button.

[katana]

April 6th, 2007, 3:30 pm

The only error I get (using the code you posted) is the following:

Quote:

document.getElementById("filter") has no properties

If you look at your code, you don't actually give the filter <select> element an ID - just a name. IE will let you away with it when you call getElementById, however for FX to work, you should really add an 'id="filter"' attribute, i.e.:

Code: [ Download ] [ Select ]

<select name = "filter" id="filter">
   <option>regex</option>
   <option>mysql</option>
  </select>

1. <select name = "filter" id="filter">
2.    <option>regex</option>
3.    <option>mysql</option>
4.   </select>

Once I added the id attribute, the code seemed to run error-free.

April 7th, 2007, 11:55 am

Oh bloody hell... That was the problem, thank you.

April 22nd, 2008, 4:12 am

Ok, so this is a year on, but I have very similar issue.

I am producing a page, using jsp, that creates, many many dropdown boxes, so much so that it can't be written to make them all on load.

I am using javascript to fill the dropdowns, when the use selects it. The fillig all works fine, but the selected value is not.
After endless trials, I now have it working fine in IE and Firefox, as long as I use an alert prior to setting the selectedIndex
The code below is the error area, x and y are values, that work perfectly, as long as the alert occurs, but I can't have the alert popping up all the time, as user might well access 40+ dropdowns...Any help gratefully received.

code:
if (casetype == CaseTypeIndex[x]) {");
document.forms['select_case'].elements[str].options[y] = new Option(CaseTypeName[x],CaseTypeIndex[x]);");
alert(document.getElementById(str).options[y].value);");
document.getElementById(str).options.selectedIndex=y;");
}