Trucs et astuces javascript, tutoriel, focus, champ, select, formulaire dynamique, bouton
   Vous êtes ici : Tutoriels  

Tutoriels

Javascript / Les formulaires...

Principe général
Les éléments de formulaire sont des objets javascript .
Cette page présente l'accès par javascript aux objets du formulaire.

Supposons le formulaire suivant :


<FORM name="general">
<INPUT type="text" name="champ1" value="Valeur initiale">
</FORM>
Accéder au formulaire
Le formulaire est un élément de l'objet document. Pour accéder au formulaire general, il faut écrire :
  • document.forms["general"]
    ou
  • document.forms[0]
    ou
  • document.general
forms est le tableau des formulaires de document. On peut accéder à un formulaire par son nom ou par son indice (commençant à 0), via le tableau elements ou directement par son nom

Accéder à un élément
Pour accéder maintenant à la zone de texte, on écrit :
  • document.forms["general"].elements["champ1"]
    ou
  • document.forms["general"].elements[0]
    ou
  • document.forms["general"].champ1
elements est le tableau de tous les éléments du formulaire. On peut accéder à un élément par son nom ou par son indice, ou directement par son nom.

Remarques :
  1. Il est préférable d'utiliser le nom des éléments, plutôt que les indices : les noms sont indépendants de l'organisation du formulaire.
  2. Les tableaux forms et elements peuvent sembler inutiles dans les exemples ci-dessus. Observez ce script pour vous convaincre du contraire :
    var nom_du_champ="champ1";
    document.forms["general"].elements[nom_du_champ]
     Ici, on peut accéder à un élément de formulaire dont le nom est contenu dans une variable javascript.

Manipuler les propriétés d'un élément
Une fois que l'élément est atteint, il est possible de manipuler ces propriétés.
Par exemple, pour placer dans la zone de texte le mot "NOUVEAU", il faut juste écrire :
document.forms["general"].elements["champ1"].value="NOUVEAU"
Cliquez sur ce bouton et observez le premier formulaire
Appeler une méthode sur un élément
Pour donner le focus au champ texte du haut de cette page, il faut appeler la méthode focus() sur cet élément.
document.forms["general"].elements["champ1"].focus()
Cliquez sur ce bouton


 

Intégrer du javascript dans un événement
Un exemple d'événement
Un événement d'un élément de formulaire est déclenché par le navigateur en réaction à une action ou un changement détecté.
L'introduction à javascript présente les différentes manières d'insérer du javascript. Il est utile de rappeler comment intégrer du javascript dans un événement.
L'événement le plus classique est le clic sur un bouton appelé onClick

Reprenons le même exemple, il s'agit de placer "NOUVEAU" dans la zone de texte du formulaire.


Voici le script correspondant :
<FORM name="changer">
<INPUT type="text" name="zonetexte" value="Valeur initiale">
<INPUT type="button" value="Changer la zone de texte"
onClick=' document.forms["changer"].elements["zonetexte"].value = "NOUVEAU" '>
</FORM>
Dans le bouton, on a rajouté l'événement onClick qui reçoit le code javascript à exécuter lors du clic sur le bouton.
La syntaxe est :
onClick=' document.forms["changer"].elements["zonetexte"].value = "Encore nouveau" '>
Le code javascript doit se mettre entre " ou entre '. Il faut faire très attention à alterner les " et '. On peut écrire :
onClick='alert("Bonjour")'>
ou
onClick="alert('Bonjour')">

L'objet "this"
Il est fastidieux d'accéder aux éléments de formulaire par toute la chaîne document.forms.elements. Un objet JavaScript this permet de raccourcir ce chemin d'accès.
this représente l'objet javascript en cours.

Donnez le focus à cette zone de texte, un message apparaît dans la barre de statut pour indiquer son nom. Le message disparaît quand le champ perd le focus.
Voici le code source simplifié par this :
<FORM name="formfocus">
  <INPUT type="text" name="champtexte" value="contenu" onFocus="window.status=this.name" onBlur="window.status=''">
</FORM>
 La variable window.status contient le message avec le nom du champ obtenu par :
this.name
équivalent ici à
document.forms["formfocus"].elements["champtexte"].name

Encore un exemple avec this
Reprenons encore une fois notre champ texte qui peut voir son contenu changer lors du clic sur un bouton :


<FORM>
    <INPUT type="text" name="zonedetexte" value="Valeur initiale">
    <INPUT type="button" value="Changer le contenu"
    onClick=' this.form.zonedetexte.value="NOUVEAU" '>
</FORM>
Grâce à this.form, on peut accéder au formulaire de l'élément en cours. Le chemin pour accéder à zonedetexte est ensuite classique.

 
 
L'accès aux éléments de type INPUT
Les zones de texte
La principale action en javascript sur une zone de texte est de manipuler son contenu.
Imaginons un formulaire appelé monform qui possède un champ texte appelé monchamp. On accède au contenu du champ par :
document.elements["monform"].elements["monchamp"].value

Il faut bien penser à ajouter la propriété .value pour accéder au contenu.

Les boutons
Un bouton sert principalement à déclencher une action javascript.
Nous avons déjà vu comment dans le paragraphe Intégrer du javascript dans un événement comment détecter le click sur un bouton.

La propriété value contient le libellé du bouton. Comme pour une zone de texte, ce libellé est accessible.

Les cases à cocher
Pour détecter qu'une case est cochée, il faut utiliser sa propriété checked
Majeur Etudiant

Voici le code de l'exemple :
<FORM>
   <INPUT type="checkbox" name="majeur">Majeur
   <INPUT type="checkbox" name="etudiant">Etudiant
   <INPUT type="button" value="Tester" onClick="alert('Majeur : '+this.form.majeur.checked+'\nEtudiant : '+this.form.etudiant.checked);">
</FORM>
checked est de type booléen. Il contient true pour vrai et false pour faux.

Les radio-boutons
Imaginons ce sondage :
Vous utilisez comme système d'exploitation :
Windows 95 Windows 98 Windows NT Linux Autre

La gestion des radio-boutons est assez complexe. Voici le code HTML de ce sondage :
<FORM>
   <INPUT type="radio" name="os" value="Windows 95" checked>Windows 95
   <INPUT type="radio" name="os" value="Windows 98">Windows 98
   <INPUT type="radio" name="os" value="Windows NT">Windows NT
   <INPUT type="radio" name="os" value="Linux">Linux
   <INPUT type="radio" name="os" value="Autre">Autre
   <INPUT type="button" value="Tester"
   onClick="testerRadio(this.form.os)">

<SCRIPT language="javascript">
   function testerRadio(radio) {
      for (var i=0; i<radio.length;i++) {
         if (radio[i].checked) {
            alert("Système = "+radio[i].value)
         }
      }
   }
</SCRIPT>
La déclaration du formulaire crée un groupe de radio-boutons liés : le nom du groupe est os.
La fonction javascript a comme paramètre le groupe des radio-boutons.
Une boucle parcourt la liste des boutons du groupe. On repère le bouton qui a la propriété checked à true et on affiche alors la valeur correspondante.
L'accès aux éléments de type SELECT


<SELECT name="liste" size=1>
  <OPTION value="valeur ligne 1">Libellé ligne 1</OPTION>
  <OPTION value="valeur ligne 2">Libellé ligne 2</OPTION>
  <OPTION value="valeur ligne 3">Libellé ligne 3</OPTION>
  <OPTION value="valeur ligne 4">Libellé ligne 4</OPTION>
</SELECT>

En JavaScript, la structure d'un élément de type SELECT reprend ce schéma :
this.form.elements['liste'].options[this.form.elements['liste'].selectedIndex].value


L'accès aux éléments de type TEXTAREA
Une zone de texte multi-lignes a comme propriété principale value qui contient le texte de la zone.
Contenu brut
Contenu traité

Pour récupérer le contenu de la zone, on utilise le classique :
 document.forms["nom"].elements["zone"].value
Le "contenu traité" est obtenu par l'appel de la fonction escape() qui convertit tous les caractères spéciaux et non visibles (tabulations, retour à la ligne, ...).
Dans notre exemple, quand "Contenu traité" est coché, on affiche :
 escape(document.forms["nom"].elements["zone"].value)
La fonction inverse est unescape().

Nous avons vu dans cette page comment manipuler les éléments de formulaires avec le javascript.


La page suivante montre les Trucs et astuces de formulaires qui facilitent la saisie dans les formulaires.
Merci au site ToutJavaScript.com, pour le contenu de cette rubrique...
 
 

© 2002-2005 DeluxeAvenue   |  contact@deluxeavenue.com
Agence de LORIENT :  Tél. 06 64 20 06 69