Retourner à la page d'accueil de TJS

Accéder au formulaire par JavaScript

Principe général

Les éléments de formulaire de la page sont aussi des objets manipulables en JavaScript (Voir aussi la page JavaScript, langage Objet, pour une présentation de ce type de programmation).
Cette page présente l'accès par JavaScript aux objets du formulaire.

Commençons par le formulaire simple 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, on peut é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 à l'indice 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 et de l'affichage 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'état 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 console pour indiquer son nom.
Voici le code source simplifié par this :

<form name="formfocus">
  <input type="text" name="champtexte" value="contenu" onfocus="console.log('Focus sur '+this.name)">
</form>

this est une référence à l'objet en cours de manipulation. Pas besoin de se soucier d'écrire un équivalent qui serait ici

document.forms["formfocus"].elements["champtexte"].name

Emulation de la console

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.

Emulation de la console

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.forms["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 et modifiable.

Les cases à cocher

Pour détecter qu'une case est cochée, il faut utiliser sa propriété checked

<form>
<input type="checkbox" name="majeur">Majeur
<input type="checkbox" name="etudiant">Etudiant
<input type="button" value="Tester" onclick="console.log('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.

Emulation de la console

Les radio-boutons

Imaginons ce sondage :

<form>
  Vous utilisez comme système d'exploitation :<br>
  <input type="radio" name="os" value="Windows" checked> Windows 
  <input type="radio" name="os" value="Linux"> Linux
  <input type="radio" name="os" value="Mac"> Mac 
  <input type="button" value="Tester" onclick="testerRadio(this.form.os)"><br>
</form>

Et la fonction pour tester la sélection :

function testerRadio(radio) {
  for (var i=0; i<radio.length;i++) {
    if (radio[i].checked) {
      console.log("Système = "+radio[i].value)			
    }
  }
}

Le formulaire donne ce résultat. Cliquez sur le bouton Tester

Emulation de la console

La gestion des radio-boutons est assez particulière, car tous les éléments ont le même nom. 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

<form name="formselect">
  <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><br>
</form>

Emulation de la console

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.elements['liste'].selectedIndex
Pour récupérer le nombre de lignes :
this.form.elements['liste'].options.length
Pour récupérer la valeur de la ligne sélectionnée :
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.

Tutoriel écrit par webmaster mis à jour le

Chercher une fonction, un objet, ...

Le 23/11/2017 19:34:17 sur php7 en 14.57 ms