|
37.1 accès éléments formulaire |
  copyleftSee You Why? |
| | exercices relatifs à l'accès aux éléments d'un formulaire (37.8) 
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,
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)
Accéder à ce formulaire, objet de la page en cours 'document', pourrait se faire de différentes façons :
document.forms[0] ;document.forms["premier_formul"] ;document.premier_formuldocument.getElementById('formul1')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).
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);
}
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 :
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
|
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)
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
|
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
|
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
|
Le chapitre précédent
S
S
S
S
S
S
voir suite >>>
voir suite >>>
| | exercices relatifs à l'accès aux éléments d'un formulaire (37.8)
Merci de votre visite à partir de :
consulter sur FaceBook... 
| Vous voulez lire quelques messages reçus ? qui ne compte chaque nouvel ordinateur visiteur qu'une seule fois m-à-j du 22/11/2021 : Depuis cette fin septembre 2009, parmi les 210 pays (sur 274 drapeaux connus) qui nous ont visité, voici les 100 pays qui nous visitent le plus, Nos petits visiteurs, classés par date de visite, où un seul ordi nous a visité, sont : 199. Turkmenistan (TM May 10, 2017) ; 200. Lesotho (LS March 1, 2017) ; 201. Turks and Caicos Island (TC January 18, 2016) 202. Cook Islands (CK September 19, 2015) 203. Faroe Islands (FO January 27, 2015) 204. Virgin Islands American (VI November 12, 2014) ; 205. Belize (BZ September 29, 2014) ;206. Eswatini - Swaziland (SZ July 21, 2014) ; 207. Grenada (GD April 3, 2014) ; 208. Timor-Leste (TI March 29, 2014) ; 209. American Samoa (AS December 26, 2012) ; 210. Guyana (GY November 5, 2010). |
copyleft
