Firefox thinks form is not defined, but IE and Chrome do.

Question

I'm trying to get the value of a drop-down menu selection. Here's my XHTML:

    <form action="(EmptyReference!)" method="get" name="myForm" id="myForm" onsubmit="myValidation(this)">
    <fieldset>
        <select name="mySelect" id="mySelect">
            <option value="o1" selected="selected">Option 1</option>
            <option value="o2">Option 2</option>
            <option value="o3">Option 3</option>
            <option value="o4">Option 4</option>
        </select>

And here's my JavaScript:

if (myForm.mySelect.options[myForm.mySelect.options.selectedIndex].value == 'o1')
    [...];
else if (myForm.mySelect.options[myForm.mySelect.options.selectedIndex].value == 'o2')
    [...];
else if (myForm.mySelect.options[myForm.mySelect.options.selectedIndex].value == 'o3')
    [...];
else
    [...];

It works perfectly in IE and Chrome. But when I press the submit button in Firefox, nothing happens. Firebug tells me myForm is not defined. What gives? Is there a workaround?

Answer 1

as far as i know you should be using document.myForm

Answer 2

You should use getElementById() for best compatibility.

var mySelect = document.getElementById('mySelect');
if (mySelect.options[mySelect.options.selectedIndex].value == 'o1')
...