Pour pouvoir contrôler les valeurs inscrites dans les champs, il faut pouvoir avoir accés aux champs du formulaire ! Pour celà on utilise les objets mis à notre disposition
Il existe trois moyens d'identifier un formulaire (balise form) dans une page pour y avoir accès en javascript : par son l'ordre d'apparition dans la page ou par son identificateur. La troisième méthode est assez spécifique mais utile.
Exemple simple de document XHTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
</head>
<body>
<form action="suivante.php" method="post">
<!-- Tous les champs de form ici -->
</form>
</body>
</html>En javascript, l'objet formulaire est :
var formulaire = document.forms[0];
On utilise pour celà l'objet document qui correspond à l'intégralité de notre page, via la propriété forms qui est un tableau d'objets. Nous n'avons qu'un seul formulaire dans la page, donc il est accessible au rang 0
Cette méthode peut-être utilisée pour accéder à n'importe quel objet de la page, pour peu qu'lui donne un identifiant.
On remplace ainsi la balise form précédente par :
<form id="monformulaire" action="suivante.php" method="post">
On a alors accès à l'objet avec :
var formulaire = document.getElementById('monformulaire');
Attention : la fonction getElementById() n'est pas connue des vieux navigateurs. Il conviendra de la redéfinir si elle n'existe pas. Pour celà, dans le head :
function myGetElement(id){
if ( document.getElementById && document.getElementById( id ) ) {
return document.getElementById( id );
}else if ( document.all && document.all[ id ] ) {
return document.all[ id ];
}else if ( document.layers && document.layers[ id ] ) {
return document.layers[ id ];
}else {
return null;
}
}On utilisera ensuite :
var formulaire = myGetElement('monformulaire');
Cette méthode peut-être utilisée pour accéder à n'importe quel objet de la page, si on appelle une fonction lors d'un évènement lié à l'objet.
Eh oui, on peut aussi avoir accés à un objet aussi directement que ça :
<form action="suivante.php" method="post" onsubmit="mafonction(this)">
"this" désigne le formulaire en question !
La méthode pour avoir la valeur rentrée dans un formulaire est différente pour les boutons radio et les menus déroulants select
Une fois qu'on a accès au formulaire, on a aussi accès à ses champs ! On se sert pour celà des noms de variables associés aux champs.
Exemple :
<input type="text" name="prenom" />
On peu accéder à l'objet avec :
var champprenom = formulaire.prenom;
Le problème avec les boutons radio, c'est qu'ils ont le même nom ! Comment on fait pour savoir lequel a été coché ?
Exemple :
<label><input type="radio" name="exemple" value="1" />Option 1</label>
<label><input type="radio" name="exemple" value="2" />Option 2</label>
<label><input type="radio" name="exemple" value="3" />Option 3</label>
<label><input type="radio" name="exemple" value="4" />Option 4</label>Et bien, le premier bouton radio sera accessible par :
var bouton1 = formulaire.exemple[0];
Chaque formulaire à ses propres ropriétés et méthodes, même si certaines se retrouvent. Pour avoir la liste : javascriptkit.com
La fenêtre elle même est un objet javascript : window a des propriétés et des méthodes.
Parmi les propriétés les plus utiles, on trouve window.location qui permet de faire une redirection en javascript. Lorsqu'on utilise cette méthode, ne pas oublier :
Il faut donc penser à mettre un petit texte après le script de redirection, avec un lien, pour permettre à tous ces utilisateurs d'accéder à la bonne page.
Pour en savoir plus sur les propriétés et méthodes de l'objet window, consultez le site de javascriptkit
Créez une simple page qui redirige vers votre index.html