Manipulation de formulaires en Javascript

Présentation au sujet: "Manipulation de formulaires en Javascript"— Transcription de la présentation:

1 Manipulation de formulaires en Javascript

2 L'architecture L'objet "form" est un des principaux objets d'un document qui contient : tous les formulaires d'une page Web. La structure est composée de : plusieurs tableaux ou "array" qui vont des formulaires aux options en passant par les éléments.

3 L'architecture

4 document.form[1].élément[1].option[1].propriété
L'architecture Noter que l'index commence à 0. Les éléments d'un formulaire sont les champs de saisie comme un champ texte ou encore les boutons de sélection et boîte à cocher commu-nément appelés "radio button" et "checkbox". Les options, dernier tableau au bout de cette structure, sont une propriété spécifique de l'élément "liste de sélection". L'organigramme présenté précédemment a montré trois formulaires dans un même document. En suivant le deuxième formulaire (index 1), on voit trois éléments dont le deuxième (index 1) est une "liste de sélection" avec trois options. Voici donc comment accéder à chaque niveau de cette structure: document.form[1].élément[1].option[1].propriété

5 Accès par la propriété "name"
Vous pouvez aussi, et c'est généralement le cas, utiliser l'attribut "name". Pour utiliser cette technique, vous devez spécifier la propriété "name" lors de la déclaration du formulaire et des éléments : <form name="monForm"...> Ou <input name="monElement"...> Une fois votre formulaire bien identifié, vous n'avez pas à localiser sa position dans le tableau mais simplement à donner son nom. document.monForm.monElement.propriété

6 Passer un formulaire et ses éléments à une fonction
Quand un formulaire ou un élément du formulaire contient une capture d'événement (event handler ) qui appelle une fonction, un paramètre réservé permet de passer l'objet qui fait la capture (atribut). De cette manière, vos codes seront plus clairs et surtout portables. Ce mot réservé est this. Voici plusieurs exemples. onSubmit="fonction(this)"> Envoie le formulaire au complet, éléments, propriétés, valeurs... à la fonction. Noter qu'il n'est pas nécessaire de spécifier "form" ici car l'objet qui l'utilise est lui même le formulaire.

7 Passer un formulaire et ses éléments à une fonction (suite…)
<input type="button" value="test" onClick="fonction(this.form)"> Envoie aussi le formulaire au complet à la fonction mais cette foi il faut préciser "form" pour indiquer au javascript d'envoyer non seulement le bouton mais le formulaire au complet. <input name="prenom" type="text" onChange="fonction(this)"> Envoie seulement l'élément "prenom" à la fonction. Cette dernière équivaut à faire: <input name="prenom" type="text" onChange="fonction(document.monForm.prenom)"> Vous pouvez envoyer une propriété spécifique de l'élément <input name="prenom" type="text" onChange="fonction(this.value)">

8 Les paramètres de fonction
Récupéré dans une fonction, le paramètre représente en tout point un formulaire, un élément ou une propriété. C'est-à-dire que la variable qui récupère le paramètre se transformera en tableau s'il s'agit d'un formulaire, en chaîne de caractère s'il s'agit d'une valeur etc…. Exemple: Passer le formulaire par le formulaire <script type="text/javascript" language="javascript"> <!-- function affiche_prenom(nForm) { alert(nForm.prenom.value); } --> </script> <form name="monForm" onSubmit="affiche_prenom(this)"> <input name="prenom" type="text"> <input type="button" name="affiche" value="Afficher"> </form>

9 Exemples de capture d'événement
Passer le formulaire par un élément <script type="text/javascript" language="javascript"> <!-- function affiche_prenom(nForm) { alert(nForm.prenom.value); } --> </script> <form name="monForm"> <input name="prenom" type="text"> <input type="button" name="affiche" value="Afficher"  onClick="affiche_prenom(this.form)"> </form>

10 Exemples de capture d'événement
Passer un élément par un élément <script type="text/javascript" language="javascript"> <!-- function affiche_prenom(nElement) { alert(nElement.value); } --> </script> <form name="monForm"> <input name="prenom" type="text"  onChange="affiche_prenom(this)"> </form>

11 Exemples de capture d'événement
Passer la propriété d'un élément par un élément <script type="text/javascript" language="javascript"> <!-- function affiche_prenom(nValeur) { alert(nValeur); } --> </script> <form name="monForm"> <input name="prenom" type="text"  onChange="affiche_prenom(this.value)"> </form>

12 Le tableau ou "array form" et les éléments.
Puisque les formulaires et les éléments sont dans des tableaux, il est possible d'afficher tous les éléments et formulaire d'un document sans même les connaître. Il suffit de savoir que la propriété "length" de l'objet form retourne le nombre de formulaires dans le document et que la propriété "length" de l'objet élément du formulaire retourne le nombre d'éléments d'un formulaire. Avec cette valeur, vous pouvez faire une simple boucle qui affiche la propriété name de chaque formulaire et de chaque élément.

13 Arrays (tableau) <script type="text/javascript" language="javascript"> <!-- Affiche_forms() function Affiche_forms() { // Fonction qui affiche le nom de tous les formulaires et éléments // Boucle tous les formulaire for (var i = 0; i < document.forms.length; i++) { // Affiche le nom ou la propriété name du formulaire i document.write(document.forms[i].name+"<br />"); // Boucle tous les éléments du formulaire i for (var l = 0; l < document.forms[i].elements.length; l++) { // Affiche le nom ou la propriété name de l'élément l document.write("- "+document.forms[i].elements[l].name+"<br />"); } // --></script> Noter que l'objet "forms" prend un "s" ainsi que l'objet "elements".