Premiers pas en JavaScript
37.1 accès éléments formulaire
cuy copyleft
  See You Why?  

 


test relatifs aux formulaires (36.9) | | exercices relatifs à l'accès aux éléments d'un formulaire (37.8)

Contenu


JavaScript 1 - Introduction
JavaScript 2 - Commentaires et instructions
JavaScript 3 - Variables
JavaScript 4 - Types de variables
JavaScript 5 - Variables et chaines
JavaScript 6 - Les fonctions
JavaScript 7 - Les fonctions à paramètre unique
JavaScript 8 - Les fonctions à paramètres multiples
JavaScript 9 - L'instruction RETURN dans une fonction
JavaScript 10 - Appel d'une fonction dans une autre fonction
JavaScript 11 - Les variables locales ou globales
JavaScript 12 - Quelques opérateurs mathématiques
JavaScript 13 - ???
JavaScript 14 - L'instruction IF, pour les conditions
JavaScript 15 - L'instruction IF... ELSE..., pour les conditions à deux sorties
JavaScript 16 - Les IF imbriqués et fonction aléatoire
JavaScript 17 - Les conditions complexes
JavaScript 18 - L'instruction SWITCH, en cas de choix multiples
JavaScript 19 - La boucle FOR
JavaScript 20 - La boucle WHILE
JavaScript 21 - Les événements dans la programmation
JavaScript 22 - Quelques événements : onMouseOver onLoad etc.
JavaScript 23 - Les objets
JavaScript 24 - Créer ses propres objets
JavaScript 25 - Appliquer des méthodes à ses objets
JavaScript 26 - Les tableaux
JavaScript 27 - Différentes façons de créer des tableaux
JavaScript 28 - Propriétés et méthodes applicables aux tableaux
JavaScript 29 - Les méthodes applicables aux tableaux
JavaScript 30 - Méthodes de tris pour tableaux SORT, REVERSE et PUSH
JavaScript 31 - Ajouter des éléments à un tableau en utilisant une boucle
JavaScript 32 - Tecnique pour imprimer les éléments d'un tableau
JavaScript 33 - Lecture de bases de données
JavaScript 34 - Les objets mathématiques
JavaScript 35 - Les objets relatifs aux dates
JavaScript 36 - Les formulaires JS sont des objets
JavaScript 37 - Accès aux éléments d'un formulaire
37.1 JS : Accès aux éléments d'un formulaire et balise input text
37.2 JS : Accès au formulaire : textarea_select_hidden_checkbox_submit
37.3 JS : Accès au formulaire : input radio, input reset
37.8 JS : exercices sur l'accès aux éléments d'un formulaire
37.9 JS : un test sur l'accès aux éléments d'un formulaire
JavaScript 38 - Validation des entrées d un formulaire
JavaScript 39 - Graphisme et JavaScript

JavaScript 50 - Calculateur d'emprunt
JavaScript 51 - Calendrier perpétuel et options diverses
JavaScript 99 - Documentation


 
 

 
Avec un peu de JavaScript,
n'oubliez pas de rendre vos pages
plus dynamiques et plus interactives.
 

 
 

 
Notre volonté est de rendre cette formation de JavaScript,
disponible le plus rapidement possible.
Le lecteur excusera l'imperfection de ce travail en cours de construction
et pourrait nous informer des défauts rencontrés.

  MERCI
 

 

 

I. Accès aux éléments d'un formulaire
'form' et 'input' de type 'text'

Nous avions promis un chapitre plus pratique qui consiste à mettre en application la théorie vue dans le chapitre précédent. Le voici. Nous suivrons le même ordre de présentation des balises que celui utilisé dans le chapitre précédent.

Dans une première séquence, nous étudierons le formulaire <form> et ses éléments, puis la balise <input> de type 'text' ;
dans une deuxième séquence, nous parcourrons la balise <select> avec la balise <option> pour chaque élément du choix, les balises <input> de type 'checkbox', 'hidden' et 'submit' ainsi que la balise <textarea> ;
dans une troisième séquence,

 

A. le formulaire <form> et ses éléments

Nous savons maintemant qu'une page (un document) peut contenir plusieurs formulaires. Imaginons donc un formulaire réduit qui demande le nom et le sexe d'un individu.

<form name="premier_formul" id="formul1">
    Votre Nom SVP : <input type="text" name="nom">
    Vous êtes de sexe : masculin <input type="radio" name="s" value="masc">
     ou féminin <input type="radio" name="s" value="fem">
</form>

Bien qu'aucun aspect pratique ne nous laisse penser que l'on puisse accéder avantageusement à l'un des formulaires d'un document, voilà cependant la réponse à la question :
a) accéder aux formulaires ;
b) accéder au nombre de formulaires ;
c) accéder au nom de chacun des formulaires ;
d) accéder au nombre d'éléments d'un formulaire ;
e) accéder au nom de chacun des éléments d'un formulaire ;
f)

 

a) accéder aux formulaires

Accéder à ce formulaire, objet de la page en cours 'document', pourrait se faire de différentes façons :

 

b) accéder au nombre de formulaires

Nous savons que forms est un tableau (un array) dont l'indice commence à zéro et qui s'incrémente à chaque nouvelle création d'un formulaire dans la page. Connaître le nombre de formulaires revient à calculer la longueur de cet array. Accéder au nombre de formulaires d'un document, pourrait se faire ainsi :

      document.forms.length

N'oublions pas que s'il n'y a qu'un seul element, son indice sera 0 (zéro), mais la longueur de l'array sera 1 (un).

 

 

c) accéder au nom de chacun des formulaires

Comme l'array forms est un tableau qui garde en mémoire tous les formulaires de votre document, il suffit de parcourir cet array par une boucle for et de lire la propriété name de chaque formulaire. Ce sera fait ainsi, par exemple, si votre page compte plus d'un formulaire :

    n=document.forms.length;
    for (i=0;i<n;i++) {
        x = " Nom du formulaire " + i + " : "+document.forms[i].name+"<br>";
        document.write(x);
    }

 

d) accéder au nombre d'éléments d'un formulaire

Comme l'array forms, JS crée un array elements dont l'indice s'incrémentera à chaque nouvel élément créé dans le formulaire en cours. Le nombre d'éléments d'un formulaire précis se notera donc :

        document.forms["premier_formul"].elements.length

Attention, car l'array elements est un tableau d'éléments qui ne s'applique qu'à un formulaire déterminé, if faut donc que le formulaire soit désigné d'une des façons précises décrites en a).

À vous de tester la balise <form> et les objets et propriétés y liées :

 

e) accéder au nom de chacun des éléments d'un formulaire

Rappelons que comme l'array forms, JS crée un array elements dont l'indice s'incrémentera à chaque nouvel élément créé dans le formulaire en cours. Le nom du deuxième des éléments d'un formulaire précis se notera donc :

        document.forms["premier_formul"].elements[1].name

Attention, car l'array elements est un tableau d'éléments qui ne s'applique qu'à un formulaire déterminé, if faut donc que le formulaire soit désigné d'une des façons précises décrites en a). De même, la propriété name d'un élément ne s'applique qu'à un élément déterminé, il faudra aussi désigner l'élément de façon précise, comme signalé plus haut.

Évidemment, le lecteur attentif aura remarqué que seul, par la formule ci-dessus, le deuxième élément (indice 1) 'livrera' son nom... si on veut obtenir tous les éléments du formulaire baptisé "premier_formul", il s'agira de créer une boucle portant sur l'indice des éléments... que pensez-vous d'un :

for (i = 0; i<document.forms["premier_formul"].elements.length; i++) {
      document.write(document.forms["premier_formul"].elements[i].name);
}

À vous de tester la balise <form> et les objets et propriétés y liées :

 

Exemple

<html>
<head><title>370a <form> de formulaire</title></head>
<body>
    <form name="premier_formul">
        <p>Votre Nom SVP : <input type="text" name="nom">
        <p>Vous êtes de sexe : masculin <input type="radio" name="s" value="masc">
            ou féminin <input type="radio" name="s" value="fem">
        <p><input type="button" onclick="ecrire();" value="ecrire" name="vasy">
    </form>
    <form name="formul_deux">
        <p>Votre Prénom SVP : <input type="text" name="prenom">
        <p>Vous aimez quel sport : foot <input type="checkbox" name="sp" value="foot">
            ou rugby <input type="checkbox" name="sp" value="rugb">
            ou basket <input type="checkbox" name="sp" value="bask">
            ou tennis <input type="checkbox" name="sp" value="tenn">
            ou natation <input type="checkbox" name="sp" value="nata">
    </form>

<script type="text/javascript">

function ecrire() {
    n = document.forms.length;
    y = " Nombre de formulaires dans la page : " + n +"<br>";
    x = " <br>";

    for (i=0;i<n;i++) {
            x += " Nombre d éléments du formulaire " + i + " : "+ document.forms[i].elements.length+"<br>";
    }
    x += " <br>";

    for (i=0;i<n;i++) {
        x += " Nom du formulaire " + i + " : "+document.forms[i].name+"<br>";
    }
    x += " <br>";

    for (i=0;i<n;i++) {
        for (j=0;j<document.forms[i].elements.length;j++) {
                x += " Formulaire " + i + " element " + j + " : " +document.forms[i].elements[j].name+"<br>";
        }
    x += " <br>";
    }
     document.write(y + x);
}
 
</script>
</body>
</html>


 

 

B. la balise <input> de type 'text'

L'incontournable de tous les formulaires JS. Vous ne l'ignorez pas, toutes les entrées faites par une balise <input> peuvent avoir un type différent, c'est l'occasion d'aborder le détail suivant "comment connaitre le type d'entrée d'éléments d'un formulaire" :
a) accéder aux types d'entrée des éléments d'un formulaire ;
b) vérifier que l'utilisateur a complété un champ d'un formulaire ;
c) vérifier que l'utilisateur a complété tous les <input> de type 'text' d'un formulaire ;
d) accéder aux types d'entrée des éléments d'un formulaire ;
e)

 

a) accéder aux types d'entrée des éléments d'un formulaire

Le chapitre précédent nous a dévoilé que les balises <input> ont toutes une propriété/attribut dénommée 'type' qui nous informe du type d'entrée de chaque élément d'un formulaire. Si nous reprenons notre exemple précédent, il suffirait d'ajouter un boucle for qui parcourt tous les éléments d'un formulaire et en donne le 'type' :

for (i=0;i<n;i++) {
  for (j=0;j<document.forms[i].elements.length;j++) {
    x += " Formulaire " +i +" element " +j +" de type : " +document.forms[i].elements[j].type+"<br>";
  }
  x += " <br>"
}

et nous connaitrons, non seulement le type des éléments d'un formulaire, mais de tous les formulaires de la page :

Essayez plutôt :

 

Exemple

<html>
<head><title>370a <form> de formulaire</title></head>
<body>
    <form name="premier_formul">
        <p>Votre Nom SVP : <input type="text" name="nom">
        <p>Vous êtes de sexe : masculin <input type="radio" name="s" value="masc">
            ou féminin <input type="radio" name="s" value="fem">
        <p><input type="button" onclick="ecrire();" value="ecrire" name="vasy">
    </form>
    <form name="formul_deux">
        <p>Votre Prénom SVP : <input type="text" name="prenom">
        <p>Vous aimez quel sport : foot <input type="checkbox" name="sp" value="foot">
            ou rugby <input type="checkbox" name="sp" value="rugb">
            ou basket <input type="checkbox" name="sp" value="bask">
            ou tennis <input type="checkbox" name="sp" value="tenn">
            ou natation <input type="checkbox" name="sp" value="nata">
    </form>

<script type="text/javascript">

function ecrire() {
    n = document.forms.length;
    y = " Nombre de formulaires dans la page : " + n +"<br>";
    x = " <br>";

    for (i=0;i<n;i++) {
            x += " Nombre d éléments du formulaire " + i + " : "+ document.forms[i].elements.length+"<br>";
    }
    x += " <br>";

    for (i=0;i<n;i++) {
        x += " Nom du formulaire " + i + " : "+document.forms[i].name+"<br>";
    }
    x += " <br>";

    for (i=0;i<n;i++) {
        for (j=0;j<document.forms[i].elements.length;j++) {
                x += " Formulaire " + i + " element " + j + " : " +document.forms[i].elements[j].name+"<br>";
        }
    x += " <br>";
    }
     document.write(y + x);
}
 
</script>
</body>
</html>


 

b) vérifier que l'utilisateur a complété un champ d'un formulaire

Souci majeur... les formulaires existent pour transmettre des informations que l'on désire soit corriger, soit stocker, soit vérifier... mais l'utilisateur n'est pas toujours prêt à donner ces informations, ou c'est un grand distrait et il oublie de répondre. D'où l'intérêt de vérifier s'il a complété un champ précis.

On utilisera le modèle DOM (vue en théorie ici) pour déterminer le champ que l'on veut désigner et on supposera que ce champ soit le prénom que l'on estime indispensable.

Le code de la fonction pourrait être :

function verif_prenom(){
    if(document.getElementById('prenom').value == ""){
        alert ('Vous avez oublié de saisir votre prénom!!!!');
        return false;
    }
    return true;
}

Évidemment, l'utilisateur peut encore entrer n'importe quoi comme prénom... à vous d'imaginer des contrôles plus rigoureux.

Exemple

<html>
<head><title>370a <form> de formulaire</title></head>
<body>
    <form name="premier_formul">
        <p>Votre Nom SVP : <input type="text" name="nom">
        <p>Vous êtes de sexe : masculin <input type="radio" name="s" value="masc">
            ou féminin <input type="radio" name="s" value="fem">
        <p><input type="button" onclick="ecrire();" value="ecrire" name="vasy">
    </form>
    <form name="formul_deux">
        <p>Votre Prénom SVP : <input type="text" name="prenom">
        <p>Vous aimez quel sport : foot <input type="checkbox" name="sp" value="foot">
            ou rugby <input type="checkbox" name="sp" value="rugb">
            ou basket <input type="checkbox" name="sp" value="bask">
            ou tennis <input type="checkbox" name="sp" value="tenn">
            ou natation <input type="checkbox" name="sp" value="nata">
    </form>

<script type="text/javascript">

function ecrire() {
    n = document.forms.length;
    y = " Nombre de formulaires dans la page : " + n +"<br>";
    x = " <br>";

    for (i=0;i<n;i++) {
            x += " Nombre d éléments du formulaire " + i + " : "+ document.forms[i].elements.length+"<br>";
    }
    x += " <br>";

    for (i=0;i<n;i++) {
        x += " Nom du formulaire " + i + " : "+document.forms[i].name+"<br>";
    }
    x += " <br>";

    for (i=0;i<n;i++) {
        for (j=0;j<document.forms[i].elements.length;j++) {
                x += " Formulaire " + i + " element " + j + " : " +document.forms[i].elements[j].name+"<br>";
        }
    x += " <br>";
    }
     document.write(y + x);
}
 
</script>
</body>
</html>


 

c) vérifier que l'utilisateur a complété tous les <input> de type 'text' d'un formulaire

Le problème est assez semblable au précédent... mais il faudra boucler et ne choisir que les input de type 'text'. On songera à employer la propriété type d'un input et value.length pour mesurer la logueur de la réponse donnée... d'où la source proposée :

function verif_touslestext(){
    var listeDInput = document.forms['premier_formul'].elements;
    var alertTxt = "";
    for (cetInput in listeDInput){
        if(cetInput.type=="text" && cetInput.value.length==0){
            alertTxt += "Le champ " + cetInput.name + " n'a pas été rempli \n";
            return false;

        }
        return true;
    }
    alert(alertTxt);

}

Exemple

<html>
<head><title>370dtous les input de formulaire</title></head>
<body>
    <form name="premier_formul" action="page.html" method="post" onsubmit="return verif_touslestext();">
        <p>Votre Nom SVP : <input type="text" name="nom">
        <p>Vous êtes de sexe : masculin <input type="radio" name="s" value="masc">
            ou féminin <input type="radio" name="s" value="fem">
        <p>Votre Prénom SVP : <input type="text" name="prenom">
        <p>Vous aimez quel sport : foot <input type="checkbox" name="sp" value="foot">
            ou rugby <input type="checkbox" name="sp" value="rugb">
            ou basket <input type="checkbox" name="sp" value="bask">
            ou tennis <input type="checkbox" name="sp" value="tenn">
            ou natation <input type="checkbox" name="sp" value="nata">
        <p><input type="submit" value="soumettre" name="vasy">
    </form>

<script type="text/javascript">

function verif_touslestext(){
    var listeDInput = document.forms['premier_formul'].elements;
    var alertTxt = "";
    for (cetInput in listeDInput){
        if(cetInput.type=="text" && cetInput.value.length==0){
            alertTxt += "Le champ " + cetInput.name + " n'a pas été rempli \n";
            return false;
        }
        return true;
    }
    alert(alertTxt);
}
 
</script>
</body>
</html>


 

 

 

d) accéder aux types d'entrée des éléments d'un formulaire

Le chapitre précédent

 

 

C. la balise <select> avec la balise <option> pour chaque élément

S

D. la balise <input> de type 'checkbox'

S

E. la balise <input> de type 'hidden'

S

F. la balise <textarea>

S

G. la balise <input> de type 'submit'

S

B. toutes les intructions entre { et } seront exécutées

S

 

 

VIII. Exercices relatifs aux accès d'éléments d'un formulaire...

voir suite >>>

 

 

IX. Test relatif aux accès d'éléments d'un formulaire...

voir suite >>>

 

 


test relatifs aux formulaires (36.9) | | exercices relatifs à l'accès aux éléments d'un formulaire (37.8)