Module 6 : Interagir avec les

formulaires HTML
Séquence 6.2 : Traitement des formulaires avec JavaScript
 Séquence 6.2 : Traitement des
formulaires avec JavaScript

Développement Web – Faycel CHAOUA & Houda TOUKABRI 24

 Plan

ACCÈS AU ACCÈS AUX ACCÈS AUX CASES ACCÈS À DES ACCÈS À DES ENVOI D’UN
FORMULAIRE ET CHAMPS DE À COCHER BOUTONS RADIOS LISTES DE FORMULAIRE
SES ÉLÉMENTS TEXTE SÉLECTION

Développement Web – Faycel CHAOUA & Houda TOUKABRI 25

 Accès au formulaire et
ses éléments

Développement Web – Faycel CHAOUA & Houda TOUKABRI 26

 Accès au formulaire et ses éléments

• document.forms : tableau permettant l’accès à tous les formulaires de la page

en cours.

• Deux façons :
• document.forms[i], i € [0, nbFormulairesPage]

• document.forms["nomFormulaire"]

Développement Web – Faycel CHAOUA & Houda TOUKABRI 27

 Accès au formulaire et ses éléments

• Tous les éléments du formulaire sont référencés par leurs noms.

• On accède à un élément à travers son nom fourni par l’attribut name par :
• document.forms["nomFormulaire"].elements["nomElement"]
• document.forms[indiceFormulaire].elements["nomElement"]

• this.form est employé pour que des éléments de formulaire accordent un accès
facile au formulaire de l'élément sans avoir à parcourir le tableau document.forms.

Développement Web – Faycel CHAOUA & Houda TOUKABRI 28

 Accès aux champs de
texte

Développement Web – Faycel CHAOUA & Houda TOUKABRI 29

 Accès aux champs de texte

• Trois types de champs : <input type="text">, <textarea>

et <input type="password">.

• Accès en JavaScript à travers l’attribut value.

• L’attribut value est accessible en mode lecture et écriture.

Développement Web – Faycel CHAOUA & Houda TOUKABRI 30

 Accès aux champs de texte
<script type="text/javascript">
function afficherEtat(f) {
window.alert(f.elements["textfield"].value);
}
</script>
<form>
<input type="text" name="textfield" />
<input type="button" value="Afficher le texte"
onclick="afficherEtat(this.form);" />
</form>

Développement Web – Faycel CHAOUA & Houda TOUKABRI 31

 Accès aux cases à
cocher

Développement Web – Faycel CHAOUA & Houda TOUKABRI 32

 Accès aux cases à cocher

• Accès en JavaScript à travers l’attribut value.

• La propriété checked a deux valeurs booléennes :
• true : case cochée.

• false : case non cochée.

Développement Web – Faycel CHAOUA & Houda TOUKABRI 33

 Accès aux cases à cocher
<script type="text/javascript">
function afficherEtat(f) {
alert("Case " + (f.elements["chkbox"].checked ? "cochée." : "non cochée."));
}
</script>
<form>
<input type="checkbox" name="chkbox" />
<input type="button" value="Etat" onclick="afficherEtat(this.form);"/>
</form>

Développement Web – Faycel CHAOUA & Houda TOUKABRI 34

 Accès à des boutons
radios

Développement Web – Faycel CHAOUA & Houda TOUKABRI 35

 Accès à des boutons radios

• Les boutons radio HTML sont toujours présentés par groupe.

• document.forms["nomFormulaire"].elements[groupeboutonsradio] est un tableau.
• Chaque sous-élément du tableau correspond à un bouton radio avec la propriété checked :
• true : case cochée.
• false : case non cochée.

Développement Web – Faycel CHAOUA & Houda TOUKABRI 36

 Accès à des boutons radios
// Exemple
<script type="text/javascript">
function afficherEtat(f) {
var s = "";
for (var i = 0; i < f.elements["radiobutton"].length; i++) {
var btn = f.elements["radiobutton"][i];
s += btn.value + ": " + btn.checked + "<br>";
}
document.getElementById('res').innerHTML = s;
}
</script>
Développement Web – Faycel CHAOUA & Houda TOUKABRI 37
 Accès à des boutons radios
//Suite de l’exemple
<form>
<input type="radio" name="radiobutton" value="R" />rouge
<input type="radio" name="radiobutton" value="V" />vert
<input type="button" value="Etat" onclick="afficherEtat(this.form);" />
</form>
<div id="res"></div>

Développement Web – Faycel CHAOUA & Houda TOUKABRI 38

 Accès à des listes de
sélection

Développement Web – Faycel CHAOUA & Houda TOUKABRI 39

 Accès à des listes de sélection

• Un élément <select> comprend une liste d’éléments <option>.

• Deux manières d'accéder aux données de liste :
• selectedIndex : Fournit l'indice (en commençant par 0) de l'élément de liste actuellement
sélectionné. -1 si aucune sélection.

• options : Représente un tableau comptant toutes les options de liste. Chaque option accepte la
propriété selected.

• Lorsque la liste contient l’attribut multiple, il est possible de sélectionner plusieurs éléments.
Développement Web – Faycel CHAOUA & Houda TOUKABRI 40
 Envoi d’un formulaire

Développement Web – Faycel CHAOUA & Houda TOUKABRI 41

 Envoi d’un formulaire

• Un bouton d'envoi (<input type="submit">) permet d'envoyer les données

du formulaire au serveur Web.

• JavaScript peut aussi employer sa méthode submit().

• Pour éviter les erreurs d’envoi, on peut créer une fonction pour la gestion de
l’événement submit.
Développement Web – Faycel CHAOUA & Houda TOUKABRI 42
 Envoi d’un formulaire
// Exemple
<script language="JavaScript" type="text/JavaScript">
function checkForm(f) {
if (f.elements["textfield"].value == "")
return false;
return true;
}
</script>
Développement Web – Faycel CHAOUA & Houda TOUKABRI 43
 Envoi d’un formulaire
// Suite de l’exemple
<form onsubmit="return checkForm(this);"
action="inscription.php">
Utilisateur <input type="text" name="textfield" />
<input type="submit" value="Envoyer" />
</form>

Développement Web – Faycel CHAOUA & Houda TOUKABRI 44