Submit n'est pas une fonction

Voici un problème d'intégration JavaScript et HTML appliqué sur le formulaire suivant :

<form id="myForm" action="page.php" method="post">
<input type="button" id="submit" name="btnSubmit" value="OK" />
</form>

Est-ce que tout est conforme jusqu'à maintenant ? Voici la suite, où le code JavaScript vous mettra sur la piste du problème. Au besoin, copiez le et faites le exécuter pour le constater. À noter que l'utilisation d'un framework comme jQuery ou Prototype (comme dans ce cas-ci) n'a aucune incidence sur le comportement.

document.observe('dom:loaded', onLoad);

function onLoad(){
   Event.observe('submit', 'click', onClick);
}

function onClick(){
   $('myForm').submit();
}

Au moment de cliquer sur le bouton, on voit apparaître l'erreur suivante (utilisez Firefox et Firebug) :

$("myForm").submit is not a function

Et pourtant, on sait tous que c'est faux. La ligne de code pourrait normalement être traduite par document.getElementById('myForm').submit() et ça serait supposé fonctionner.

Alors, quelle est la cause de l'erreur ? Croyez le ou non, si par malheur un élément du formulaire possède une propriété ID portant la valeur "submit", l'engin JS trouvera cette propriété plutôt que d'appeler la fonction du même nom. Donc il suffit de renommer l'ID autrement.

Et ce comportement peut arriver sur n'importe quelle balise INPUT, SELECT, FIELDSET, etc se trouvant entre <form></form>.

C'est donc une très mauvaise idée d'utiliser comme ID un mot clé réservé. Mon conseil serait de toujours préfixer les identificateurs uniques de façon à utiliser une nomenclature qui permettra de bien distinguer les éléments de la page.