Forms et Evénements

Tutoriaux, Sommaire JavaScript

1. Evénements onchange, onblur
 
       Quand un élément d'une forme devient actif, soit par un click de souris ou par une tabulation, on dit qu'il prend le focus. Quand on quitte cet élément, par exemple quand on change de champ de saisie, l'élément quitté perd le focus. A ce moment il peut générer deux événement, onblur et onchange.
    onblur est généré par certain élément quand ils perdent le focus.
    onchange est généré par des éléments dont la valeur est modifiable, quand ils perdent le focus et que leur valeurs à été modifiées. C'est le cas des éléments Text, TextArea, et Select.

Nous allons générer un Cette forme n'est pas opérationnelle, elle est destinée à vous permettre de suivre plus facilement le raisonnement formulaire telle que celui-dessous. Il permet de rentrer un nom de société, (champ Société), le nom valide est affiché au-dessus et un nom de famille, (champ Nom). un champ Aide qui permet d'afficher un message d'erreur.
Nom valide EXO
Entrez le nom de la société

Entrez votre nom


Aide
    Ce formulaire est construit dans la forme ci-dessous.
    Nous nous servons de l'événement onblur pour détecter si le nom de la société entrée est bien valide. Quand on passe du champ "Entrez le nom de la société" à "Entrez votre nom", le champ Société perd le focus et génére un événement onblur, cet événement appel la fonction Valide().
    Dans cette fonction on vérifie si le nom de la société est valide, (ici EXO), si le nom est différend un message d'erreur est affiché dans un troisième champ et le focus revient sur le champ de saisie de nom de société. Si le nom est bon, on reste sur le champ Nom et la saisie continue. Essayez le programme dans la forme ci-dessous, avec le  nom EXO et avec d'autres noms.
     Vous pouvez voir un organigramme du programme, celui-ci démarre au moment ou l'élément Société à le focus.
 Voir l'organigramme.
    Programmation de l'événement onblur pour le champ société.
Entrez le nom de la société <br>
<input type="text" maxlength="50" name="Societe" size="25" value="" onblur="Verifie()">
    Fonction Verifie(),
function Verifie(){
  //Vérification que le nom de la société est EXO
  if(document.Transaction.Societe.value == "EXO"){
    //Effacement du champ Aide dans le cas d'une erreur précédente
    document.Transaction.Aide.value = ""
  }else{
    //Le nom de société ne correspond pas à un nom valide
    //Affichage dans Aide d'un message d'erreur
    document.Transaction.Aide.value = "Cette société n'est pas répertorié"
    //Effacement du champ Société en vue d'une nouvelle saisie
    document.Transaction.Societe.value = ""
    //Le curseur revient au champ Société
    document.Transaction.Societe.focus()
  }
}
    La dernière instruction de la fonction Valide(),
        document.Transaction.Societe.focus()
    Permet de redonner le focus au champ Société. focus() est une méthode de l'objet document.form.

Code de la page:

     
 
    On peut noter que le programme précédent a quelques insuffisances,
        1. à l'appel de page le curseur n'est pas positionné sur le premier champ, (Société), bien que celui-ci soit obligatoire,
        2. on efface le champ Société en cas d'erreur, il est souvent intéressant de conserver le contenu du champ en le sélectionnant pour que le visiteur sache ce qu'il à précédemment entré,
        3. il serait intéressant de créer un champ renseignements où nous afficherions des indications sur le contenu à entrer dans les champs, par exemple, pour le champ société, 'Nom valide EXO' et pour le champ Nom, 'Nom de famille'.

    Point 1.
        Il faut donner le focus au champ société à l'ouverture de la page. Solution. Faire la modification dans la forme ci-dessus.

    Point 2.
        Semblable à la méthode focus(), il existe la méthode select(), pour sélctionner le contenu du champ Société, il faut remplacer la ligne,
document.Transaction.Societe.value = "" par
document.Transaction.Societe.select()  dans la fonction Valide().
    Faire la modification dans la forme ci-dessus.

    Point 3.
        On peut créer un champ texte au-dessus du champ société, à la place du texte, "
Nom valide EXO", nommer ce champ Renseigne. Solution.
        On peut se servir d'un autre événement, onfocus, cet événement est émis quand le contrôle est donné à un élément, pour un champ texte, quand le curseur est à l'intérieur.
        Cet événement onfocus, va nous permettre de modifier le contenu du champ Renseigne, quand les champs Société et Nom auront le focus. Les textes à afficher seront ceux du point 3 ci-dessus.
        Nous pourrions appeler une fonction en passant les messages en paramètre mais il me semble plus élégant de faire exécuter l'instruction d'assignation du champ Renseigne  directement par l'événement, par exemple pour le champ Société,
    onfocus="document.Transaction.Renseigne.value = 'Nom valide EXO' "
    Observez que le texte est compris entre des apostrophes simples car toute l'instruction d'assignation du champ Renseigne,  "document.Transaction.Renseigne.value = 'Nom valide EXO'" est elle même comprise entre des apostrophes doubles.
       
Faire les modifications dans la forme ci-dessus.

   Corrigé.
   
2. En cours
 
   Corrigé.
   Corrigé.
   Corrigé.
   Corrigé.

Code de la page:

     
 
   


 [  ]
 {  }

    Corrigé.

 En clicquant sur le bouton Observez

Pop Up   PopUp

Visualisateur   Visualisateur

affichepage


Sommaire
Précédent Suivant