Accéder au formulaire par JavaScript

document.forms["general"].elements["champ1"].value="NOUVEAU"

document.forms["general"].elements["champ1"].focus();

Cliquez sur ce bouton

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>

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

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

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.

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

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>

En JavaScript, la structure d'un élément de type select reprend ce schéma :

this.form.elements['liste'].selectedIndex

this.form.elements['liste'].options.length

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.