Javascript et les formulaires

Javascript et les formulaires
Principe général
Les éléments de formulaire sont des objets javascript.
Nous allons voir ici comment accéder 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
ou
document.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, créez le formulaire ci-dessus dans lequel vous allez placer le champ pour placer dans la
zone de texte le mot "NOUVEAU". Dans le head créez une fonction dans laquelle vous allez mettre le code
ci-dessous et que vous appellerez sur l’événement onclick d’un bouton.
document.general.elements["champ1"].value="NOUVEAU" ;
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.general.champ1.focus() ;
Vous pouvez par exemple créer une autre fonction que vous allez appeler dans la balise body sur
l’événement onload
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.
contenu
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.formfocus.champtexte.name
Encore un exemple avec this
Reprenons notre champ texte qui peut voir son contenu changé lors du clic sur un bouton :
Valeur initiale
<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.monform.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.
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
Libellé ligne 1
<SELECT name="liste" size=1>
<OPTION value="valeur ligne
<OPTION value="valeur ligne
<OPTION value="valeur ligne
<OPTION value="valeur ligne
</SELECT>
1">Libellé
2">Libellé
3">Libellé
4">Libellé
ligne
ligne
ligne
ligne
1</OPTION>
2</OPTION>
3</OPTION>
4</OPTION>
En JavaScript, la structure d'un élément de type SELECT reprend ce schéma :
name
Nom de la liste
selectedIndex
Indice de la ligne sélectionnée
(ligne 1 : indice=0)
options
Tableau des lignes
length
Nombre de lignes
value
Valeur d'une ligne
text
Libellé d'une ligne
Voici le code des événements des boutons.
Pour récupérer l'indice la ligne sélectionnée :
this.form.liste.selectedIndex
Pour récupérer le nombre de lignes :
this.form.liste.options.length
Pour récupérer la valeur de la ligne sélectionnée :
this.form.liste.options[this.form.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.
Ligne 1
Ligne 2
Dernière ligne
Contenu brut
Contenu traité
Pour récupérer le contenu de la zone, on utilise le classique :
document.monform.mazone.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.monform.mazone.value)
La fonction inverse est unescape().