Événements dans un formulaire

Lorsque le client clique dans le formulaire, modifie des champs, coche des boutons radio..., il est possible d'exécuter du code JavaScript. Ce code sert généralement à :

vérifier la validité des données entrées (pas de lettres dans un numéro de fax)
donner des informations (affichage d'un message dans la barre d'état lorsqu'on clique dans un champ de formulaire)

Attributs d'événements

Les événements se placent dans l'élément de formulaire comme des attributs.

Syntaxe

nom_evenement = "code JavaScript"

Le code JavaScript étant la plupart du temps un appel à une fonction JavaScript définie plus haut dans la page.

onclick (clic sur un élément)

Éléments concernés

cases à cocher (INPUT type="checkbox")
boutons radio (INPUT type="radio")
boutons de soumission (INPUT type="submit")
boutons de soumission avec image (INPUT type="image")
boutons d'annulation (INPUT type="reset")
boutons simples (INPUT type="button")

Exemple avec un bouton de type button

Extrait du formulaire

Code HTML

<INPUT type="button" value="Informations" name="binfo" 
       onclick="Info()">

Code JavaScript défini dans un élément script

function Info()
{
     alert('Nos produits sont en general non perimes');
}

Exemple avec un bouton de type submit

Extrait du formulaire

Code HTML

<INPUT type="submit" value="Commander"
       onclick="return Confirmer()">

Code JavaScript défini dans un élément script

function Confirmer()
{
    return window.confirm('Voulez-vous vraiment commander ?');	
}

Exemple avec des boutons radio

Extrait du formulaire

Carte Bleue
Carte Visa
Master Card
Chèque

Code HTML

<INPUT type="radio" name="paiement" value="carte_bleue" 
       onclick="AffStatus(1)">Carte Bleue
<INPUT type="radio" name="paiement" value="visa"
       onclick="AffStatus(2)">Carte Visa
<INPUT type="radio" name="paiement" value="master_card" 
       onclick="AffStatus(3)">Master Card
<INPUT type="radio" name="paiement" value="cheque" checked 
       onclick="AffStatus(4)">Chèque

Code JavaScript défini dans un élément script

function AffStatus(choix)
{
    switch (choix){
        case 1 : window.status = 'avez-vous vraiment une carte bleue ?'; break;
        case 2 : window.status = 'avez-vous vraiment une carte visa ?'; break;
        case 3 : window.status = 'avez-vous vraiment une master card ?'; break;
        case 4 : window.status = 'un cheque sans provision ?'; break;
        default : window.status = 'mauvais choix';
    }
}

onchange (modification dans l'élément)

Éléments concernés

boîtes de saisie de texte (INPUT type="text")
saisie de textes sur plusieurs lignes (TEXTAREA)
boîtes de saisie masquées (INPUT type="password")
boîtes de soumission de fichier (INPUT type="file")
listes (SELECT)

Exemple avec un champ dont le contenu est masqué

Extrait du formulaire

Entrez un code dans le champ puis cliquez en dehors

Code HTML

<INPUT type="password" name="code" onChange="alert(this.value)">

onfocus, onblur (attribution, perte du focus)

Éléments concernés

boîtes de saisie de texte (INPUT type="text")
saisie de textes sur plusieurs lignes (TEXTAREA)
boîtes de saisie masquées (INPUT type="password")
boîtes de soumission de fichier (INPUT type="file")
listes (SELECT)

Exemple avec un champ dont le contenu est masqué

Extrait du formulaire

Code HTML

<INPUT type="password" name="pwd" onfocus="window.status='Entrez votre code'">

onselect (sélection dans un champ)

Éléments concernés

boîtes de saisie de texte (INPUT type="text")
saisie de textes sur plusieurs lignes (TEXTAREA)
boîtes de saisie masquées (INPUT type="password")
boîtes de soumission de fichier (INPUT type="file")

Exemple avec un champ dont le contenu est masqué

Extrait du formulaire

Code HTML

<INPUT type="password" name="pwd" onselect="window.status='selection'">

onreset, onsubmit

Lorsque le formulaire est soumis en appuyant sur le bouton de soumission il est possible d'appeler un événement onsubmit (pour vérifier par exemple la validité des données avant d'envoyer le formulaire, pour demander la confirmation de la soumission).

L'événement onreset est appelé lorsqu'on a cliqué sur un bouton de type reset.

Méthodes

nom	rôle	contrôles concernés	DOM
blur()	enlève le focus d'un champ du formulaire	input, select, textarea	level 1
click()	simule un clic de souris sur le champ du formulaire (input, )	input	level 1
focus()	attribue le focus à un champ du formulaire	input, select, textarea	level 1
select()	sélectionne le contenu d'un champ du formulaire	input, textarea	level 1

il existe également les méthodes submit() et reset() pour l'élément form (défini dans le DOM Level 1)

Exemples

Formulaire

nom prénom

Code HTML

<div>
nom <INPUT type="text" name="nom">
pr&eacute;nom <INPUT type="text" name="prenom">
</div>
<div>
<input type="button" value="focus nom" onclick="nom.focus()">
<input type="button" value="focus prenom" onclick="prenom.focus()"><br>
<input type="button" value="select nom" onclick="nom.select()">
<input type="button" value="select prenom" onclick="prenom.select()">
</div>

Activer ou désactiver des contrôles

Il est possible de désactiver ou d'activer des contrôles d'un formulaire pour les éléments INPUT, BUTTON, TEXTAREA et SELECT en réponse à un événement.

Syntaxe (DOM Level 1)

nom_controle.disabled = true/false

Exemple

Formulaire

nombre

Code HTML

nombre <INPUT type="text" name="nombre">
<input type="button" value="activer" onclick="nombre.disabled = false">
<input type="button" value="desactiver" onclick="nombre.disabled = true">

Événements dans un formulaire

Attributs d'événements

Syntaxe

onclick (clic sur un élément)

Éléments concernés

Exemple avec un bouton de type button

Extrait du formulaire

Code HTML

Code JavaScript défini dans un élément script

Exemple avec un bouton de type submit

Extrait du formulaire

Code HTML

Code JavaScript défini dans un élément script

Exemple avec des boutons radio

Extrait du formulaire

Code HTML

Code JavaScript défini dans un élément script

onchange (modification dans l'élément)

Éléments concernés

Exemple avec un champ dont le contenu est masqué

Extrait du formulaire

Code HTML

onfocus, onblur (attribution, perte du focus)

Éléments concernés

Exemple avec un champ dont le contenu est masqué

Extrait du formulaire

Code HTML

onselect (sélection dans un champ)

Éléments concernés

Exemple avec un champ dont le contenu est masqué

Extrait du formulaire

Code HTML

onreset, onsubmit

Méthodes

Exemples

Formulaire

Code HTML

Activer ou désactiver des contrôles

Syntaxe (DOM Level 1)

Exemple

Formulaire

Code HTML

Une calculatrice pour la racine carrée