Un problématique récurrente dans le développement web, c’est de faire en sorte que si un utilisateur appuie sur la touche ‘Entrée’ cela valide le formulaire.
Le fonctionnement doit être totalement identique par rapport au fait de cliquer sur un bouton ‘Valider’ ou ‘Enregistrer’.
La solution est toute simple encore faut il savoir comment fonctionne par défaut les formulaires dans les navigateurs.
Par défaut lorsque vous appuyez sur ‘Entrée’ dans un formulaire HTML, le navigateur recherche un bouton de type ‘Submit’ et simule un click sur ce bouton. Si le tag onsubmit est renseigné, le code associé est exécuté.
Mais ce bouton ne doit pas forcement être visible, c’est la l’astuce. Vous rester libre de créer votre formulaire avec le design qu’il vous plait. Il suffit d’ajouter un bouton 'submit' caché avec un appel à la bonne fonction.
<form onsubmit="envoiForm(); return false;"> ..... <input type="submit" style="display:none"> <button id="bt_save" onclick="envoiForm()">Enregistrer</button> ..... </form>
Ci-dessus le bouton 'submit' est caché grace à style="display:none. Pour que tout fonctionne correctement il faut également dans le tag form ajouter la balise onsubmit pour appeler la même fonction que le bouton ‘Enregistrer’.
En résumé si l’utilisateur click sur le bouton ‘Enregistrer’ la fonction envoiForm() est appelée directement.
Si l’utilisateur appuye sur la touche Entrée, c’est le bouton submit qui rentre en jeux et déclenche le onsubmit du form. Ce dernier appel alors également la fonction envoiForm().