Un contrôle de formulaire qui ne fonctionne pas

Version imprimable

Bonjour à tous,

Soit une partie d'un formulaire :
Code:

1 2 3 4 5 6 7 8 9 <?php for($i=0 ; $i < 5; $i++){ echo '<input type="text" name="code[]">'; } ?>
Je veux que tous ces champs soient remplis, et je voudrais faire un contrôle par JS sur le bouton (de type button). J'ai crée une fonction "controle" que voici :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 function controle(){ var nb_champs = document.getElementsByName("code[]").length; var msg = ""; for(var i=0;i<nb_champs;i++){ var j = i + 1; var code = document.getElementsByName("code[]")[i].value; if(code[i] == ""){ msg += "Le code N° "+j+" n'est pas saisi\n"; } } if(msg != ""){ alert(msg); return false; } return true; }
Mais la console JS de FF est sans pitié :

Citation:

code[i] is undefined

Quelqu'un saurait me dire pourquoi ?
Je le remercie d'avance.

08/01/2011, 16h04
RomainVALERI

Ici

Code:

var code = document.getElementsByName("code[]")[i].value;

...tu récupères le contenu de ton élément.

Mais à la ligne suivante tu testes "code[i]", comme si tu cherchais l'élément i de la collection :aie:

Modifie ton test ;)

Code:

if(code[i] == "")

(cela dit, des crochets dans un name... ? 8O)

edit : heu... [Encodage] ??? :koi: quel rapport ?
08/01/2011, 16h37
renaud26

Merci pour ta réponse, c'était bien ça et ça fonctionne impec !

Citation:

cela dit, des crochets dans un name... ?

Ben je vois pas trop comment faire autrement, pour contrôler, par exmemple, des checkbox multiples...

Merci encore et bonne fin de journée.

Salut le clermontois (me too), pour une fonction plus générique, je ferais plutôt un truc dans le genre :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<script type="text/javascript">
<!--
function Controle_champ(bloc,type_champ)
{
    // Sélection du bloc contenant les champs à contrôler
	var bloc = document.getElementById(bloc);
 
 
	if(bloc)
		{
			//Initialisation d'une variable pour contenir un tableau.
			var tab = new Array();
 
			// Cherche les balises "type_champ" inlues dans le bloc ("formulaire1" ou "form_text" dans l'exemple) 
			tab = bloc.getElementsByTagName(type_champ);
 
	   	   	var nb_tableau = tab.length;
 
			// Liste les éléments du tableau
			for (i=0; i < nb_tableau; i++)        
				{
					alert(tab[i].value);				
				}
 
		}
}
 
-->
</script>
 
</head>
 
<body>
<div>
	<form action = "#" method = "post"  onsubmit = "Controle_champ('form_input','input');Controle_champ('form_text','textarea');" >
		<div>
				<p id = "form_input">
 
					 <input type="text" name = "code[]" value = ""  />
					 <input type="text" name = "code[]" value = ""  />
					 <input type="text" name = "code[]" value = "tata"  />
					 <input type="text" name = "code[]" value = ""  />
					 <input type="text" name = "code[]" value = ""  />
 
				</p>
 
				<p id = "form_text">
					<textarea name="texte" >toto</textarea>
				</p>		 
 
				<input name = "envoyer" value = "Envoyer" type = "submit"/>
 
		</div>
	</form>
</div>
</body>
</html>

08/01/2011, 16h57
thelvin

Citation:

Envoyé par renaud26

Ben je vois pas trop comment faire autrement, pour contrôler, par exmemple, des checkbox multiples...

Un nom chacune, par exemple ?
Genre, code_1, code_2, code_3...
08/01/2011, 17h00
renaud26
Hello !

Merci de ton intervention !
Elle m'intéresse beaucoup car je suis confronté à un autre problème.

Il y a des cas où je suis obligé de forcer la clef des inputs :
Code:

1 2 3 4 5 6 <?php for($i=0; $i<5; $i++){ echo '<input name="code[$i]">'; } ?>
Et dans ce cas le contrôle JS plante ici :
Code:

1 2 var code= document.getElementsByName("code["+i+"]")[i].value;
Je regarde donc ta soluce de très près et je te dis.
08/01/2011, 17h04
ABCIWEB

Citation:

Envoyé par thelvin

Un nom chacune, par exemple ?
Genre, code_1, code_2, code_3...

Mais heu... qu'est-ce que vous avez à critiquer cette syntaxe name = "tab[]" ?

C'est tout à fait valide, très pratique et fréquemment utilisé ;)

Et pour info, le type de sélection en cascade que j'utilise dans le code javascript donné plus haut, peut servir à faire de petites listes liées (déroulantes ou non) en html/javascript sans rechargement de la page, exemple ici:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
 
<?php
if (isset($_POST["envoyer"]))
{              
                echo '<pre>';
                print_r($_POST);
                echo '</pre>';
}
?>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Listes liées HTML JAVASCRIPT</title>
<script type="text/javascript">
<!--
function Affiche_liste(id_ensemble_select,id_select)
{
        // Sélection du bloc contenant les sélections liées (id = "categorie" dans notre exemple)
        var id_ensemble_select = document.getElementById(id_ensemble_select);
 
        // Sélection de la sélection liée
        var id_select = document.getElementById(id_select);
 
        if(id_ensemble_select && id_select)
                {
                        //Initialisation d'une variable pour contenir un tableau.
                        var tab = new Array();
 
                        // Cherche les balises select inlues dans le bloc (id = "categorie" dans notre exemple) contenant les sélections liées  et les retourne dans un tableau
                        tab = id_ensemble_select.getElementsByTagName('select');
 
                        // Liste les éléments du tableau
                        for (i=0; i < tab.length; i++)        
                                        {
                                                // Met les selects en disable = true et les cache avec style.display = 'none'
                                                tab[i].disabled = true;
                                                tab[i].style.display = 'none';
                                        }
 
                        // Met la sélection liée sélectionné en disable = false et l'affiche avec style.display = 'inline'         
                        id_select.disabled = false;
                        id_select.style.display = 'inline';
 
                }
}
 
-->
</script>
<style type="text/css">
 
#categorie
{
        height:2em;
}
 
#categorie select
{
        display:none;
}
 
</style>
 
</head>
 
<body>
 
<div style="width:40em;margin:auto; border:1px solid black;padding:1em">
 
        <form action = "#" method = "post">
 
                <p>
                        <label for="choix_cadets">cadets</label>
                        <input type="radio" id = "choix_cadets" name = "cat" value = "cadets" class = "categorie" onclick = "Affiche_liste(this.className,this.value)" />
 
                        <label for="choix_juniors">juniors</label>
                        <input type="radio" id = "choix_juniors" name = "cat" value = "juniors" class = "categorie" onclick = "Affiche_liste(this.className,this.value)" />
 
                        <label for="choix_seniors">seniors</label>
                         <input type="radio" id = "choix_seniors" name = "cat" value = "seniors" class = "categorie" onclick = "Affiche_liste(this.className,this.value)" />
 
                <!--
                        <select name = "cat" class = "categorie" onchange = "Affiche_liste(this.className,this.value)" />
 
                           <option value = "">«Choisissez»</option>
                           <option value = "cadets">cadets</option>
                           <option value = "juniors">juniors</option>
                           <option value = "seniors">seniors</option>
 
                        </select>
                -->
                </p>
 
 
                <p style="font-style:italic">La liste déroulante ci-dessous s'affichera en fonction du choix ci-dessus :</p>
 
                <p id = "categorie">     
                        <select name = "selection" id = "cadets">
 
                           <option value = "">«Choisissez»</option>
                           <option value = "cadet1">Cadet 1</option>
                           <option value = "cadet2">Cadet 2</option>
 
                        </select>
 
 
                        <select name = "selection" id = "juniors">
 
                           <option value = "">«Choisissez»</option>
                           <option value = "junior1">Junior 1</option>
                           <option value = "junior2">Junior 2</option>
 
                        </select>
 
 
                        <select name = "selection" id = "seniors">
 
                           <option value = "">«Choisissez»</option>
                           <option value = "senior1">Senior 1</option>
                           <option value = "senior2">Senior 2</option>
                           <option value = "senior3">Senior 3</option>
 
                        </select>  
           </p>
 
 
           <p style="font-style:italic">Exemple autre champ texte</p>
 
           <p>
           <input type="text" name="autre_champ"/>
           <br />
           <br />
 
           <input name = "envoyer" value = "Envoyer" type = "submit"/>
                </p>
        </form>
 
</div>
 
</body>
</html>

08/01/2011, 17h39
renaud26

Ouais, elle est bien sympa, ta fonction.
:)

Justement le formulaire que je bosse utilise à fond les httpRequest et il est complètement dynamique (d'où les boucles PHP et les input avec name="toto[]") puisque c'est l'utilisateur qui choisit combien de champs il veut afficher...C'est donc un nombre que j'ignore, et il ne m'est évidemment pas possible de travailler avec name="champ_1", name="champ_2"...

Merci à toi, ça m'ouvre de nouvelles perspectives.
Bonne fin de journée.
08/01/2011, 20h22
thelvin

Citation:

Envoyé par ABCIWEB

Mais heu... qu'est-ce que vous avez à critiquer cette syntaxe name = "tab[]" ?

Ce n'est pas une syntaxe, juste un bricolage inventé par le langage PHP, du fait de la syntaxe PHP de gestion des tableaux.
Ça donne des noms de champs qui font bizarre.

Rien de grave, donc.

Citation:

Envoyé par ABCIWEB

très pratique et fréquemment utilisé ;)

Uniquement en PHP. Les autres ne le gèrent pas spécialement bien (j'admets que ce serait pratique s'ils le faisaient,) et on ne perd pas spécialement de temps à faire autrement.

Citation:

Envoyé par renaud26

C'est donc un nombre que j'ignore, et il ne m'est évidemment pas possible de travailler avec name="champ_1", name="champ_2"...

Sache que je ne veux pas t'embêter, je réponds juste aux questions.
Pour information, il est tout-à-fait possible de travailler comme ça, dans tous les cas. Et je ne vois pas ce qu'il y aurait "d'évident" dans le contraire.
Ce qui est évident, c'est qu'il est plus simple de leur donner à toutes le même nom.
08/01/2011, 20h39
renaud26
Pas de problème pour moi.
:)

Tu as raison : je pourrais faire :
Code:

1 2 3 4 for($i=0;$i<5;$i++){ echo '<input name="champ_'.$i.'">'; }
Mais je trouve plus pratique de tout mettre dans un tableau.
C'est un avis perso.
Je te souhaite une bonne soirée, et merci d'être intervenu dans mon post.
09/01/2011, 23h01
ABCIWEB

Citation:

Envoyé par thelvin

Uniquement en PHP. Les autres ne le gèrent pas spécialement bien (j'admets que ce serait pratique s'ils le faisaient,) et on ne perd pas spécialement de temps à faire autrement.

Ah... ça répond à mon étonnement initial, on vient pas du même monde ;)

... parfois on gagne beaucoup de temps avec cette "syntaxe" notamment si on veux rajouter par exemple des champs de téléchargement, à la volée avec javascript, dans un formulaire. C'est à la fois plus simple à coder côté javascript, et en même temps les données du post sont plus faciles à récupérer côté serveur. Vive le bricolage php ! :)
10/01/2011, 13h31
thelvin

Faire autrement n'est pas spécialement plus long. Ce bricolage a la cote parce que c'est les premiers exemples qui ont été donnés dans les premiers tutoriels PHP. Puis c'est resté. Amusément, cela fonctionne aussi dans une certaine mesure en JavaScript, ce qui fait que c'est parfois repris ici.
10/01/2011, 23h36
ABCIWEB

Citation:

Envoyé par thelvin

Ce bricolage a la cote parce que c'est les premiers exemples qui ont été donnés dans les premiers tutoriels PHP. Puis c'est resté. Amusément, cela fonctionne aussi dans une certaine mesure en JavaScript, ce qui fait que c'est parfois repris ici.

Oui bien sûr, le manuel php est un ramassi de bricolage fait amusément un peu au hasard ... :mouarf:
11/01/2011, 02h20
thelvin

... Je t'accorde que c'était bien plus flagrant à l'époque où ça commençait à prendre que maintenant, mais bon... Il y a des gens qui doutent de ça ?
On peut produire de très bonnes choses avec, je dis pas le contraire.