Question

I have a script for Other option in select boxes.

Works fine in IE, but not Chrome or firefox.

Here is the script and form.

<SCRIPT TYPE="text/javascript"> 
    function toggleField(val) {
        var o = document.getElementById('other'); 
        var o1 = document.getElementById('other1'); 
        var opt = document.getElementById('i_skate'); 
        var opt1 = document.getElementById('my-style'); 
        (opt.options[opt.length-1].selected)? o.style.display = 'block' : o.style.display  = 'none'; 
        (opt1.options[opt1.length-1].selected)? o1.style.display = 'block' : o1.style.display = 'none'; 
    } 
</SCRIPT>


<SELECT NAME="i_skate" SIZE="1" ONCHANGE="toggleField(this.value);">
    <OPTION VALUE="Just a Fan">Just a Fan</OPTION>
    <OPTION VALUE="Everyday">Everyday</OPTION>
    <OPTION VALUE="Few times a Week">Few times a Week</OPTION>
    <OPTION VALUE="Few times a Month">Few times a Month</OPTION>
    <OPTION VALUE="">Other</OPTION>
</SELECT><INPUT TYPE="TEXT" NAME="i_skate" ID="other" STYLE="display: none;" SIZE="20"> 

<SELECT NAME="my-style" SIZE="1" ONCHANGE="toggleField(this.value);">
    <OPTION VALUE="Street Skate">Street Skate</OPTION>
    <OPTION VALUE="Downhill">Downhill</OPTION>
    <OPTION VALUE="Freestyle">Freestyle</OPTION>
    <OPTION VALUE="Pools-Bowls">Pools-Bowls</OPTION>
    <OPTION VALUE="Vert Halfpipe">Vert Halfpipe</OPTION>
    <OPTION VALUE="Park">Park</OPTION>
    <OPTION VALUE="Mini Ramp">Mini Ramp</OPTION>
    <OPTION VALUE="">Other1</OPTION>
</SELECT>
<INPUT TYPE="TEXT" NAME="my-style" ID="other1" STYLE="display: none;" SIZE="20">

Can someone take a look at this and tell me what I’m missing?

Thanks in advance.

Answer 1

You’re trying to use getElementById with elements that don’t have the ID you’re referencing but rather a name (in your opt and opt1 variables). For example, in your line var opt = document.getElementById('i_skate'); you have no element with an ID of i_skate but you do have one with a name of i_skate. Now you could change that element’s ID and solve the issue, or change your JavaScript (like I do below) to use getElementsByName instead var opt = document.getElementsByName('i_skate');.

getElementsByName is slightly different from getElementById as getElementById will only return one element (if it exists) whereas getElementsByName can return more than one element. Being the case, you would need to refer to the first element as opt[0] and not just opt.

Try:

function toggleField(val) {
    var o = document.getElementById('other');
    var o1 = document.getElementById('other1');
    var opt = document.getElementsByName('i_skate');
    var opt1 = document.getElementsByName('my-style');
    (opt[0].options[opt[0].length - 1].selected) ? o.style.display = 'block' : o.style.display = 'none';
    (opt1[0].options[opt1[0].length - 1].selected) ? o1.style.display = 'block' : o1.style.display = 'none';
}​

jsFiddle example.