Firefox pense que la forme n'est pas définie, mais IE et Chrome font

Question

J'essaie d'obtenir la valeur d'une sélection de menu déroulant. Voici mon 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> 

Et voici mon 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 
    [...]; 

Il fonctionne parfaitement dans IE et Chrome. Mais quand j'appuie sur le bouton soumettre dans Firefox, rien ne se passe. Firebug me dit que myForm n'est pas défini. Ce qui donne? Y at-il un travail autour?

Answer 1

Vous devez utiliser getElementById() pour une meilleure compatibilité.

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

Answer 2

pour autant que je sais que vous devez utiliser document.myForm