Un contrôle de formulaire qui ne fonctionne pas [Résolu]

renaud26 · 08/01/2011, 15h11

Bonjour à tous,

Soit une partie d'un formulaire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

RomainVALERI · 08/01/2011, 16h04

Ici

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Modifie ton test

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

if(code[i] == "")

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

)

edit : heu... [Encodage] ??? quel rapport ?

renaud26 · 08/01/2011, 16h37

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.

ABCIWEB · 08/01/2011, 16h56

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

thelvin · 08/01/2011, 16h57

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...

renaud26 · 08/01/2011, 17h00

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Je regarde donc ta soluce de très près et je te dis.

ABCIWEB · 08/01/2011, 17h04

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é

ABCIWEB · 08/01/2011, 17h26

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

renaud26 · 08/01/2011, 17h39

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.

thelvin · 08/01/2011, 20h22

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.

renaud26 · 08/01/2011, 20h39

Pas de problème pour moi.

Tu as raison : je pourrais faire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

ABCIWEB · 09/01/2011, 23h01

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 !

thelvin · 10/01/2011, 13h31

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.

ABCIWEB · 10/01/2011, 23h36

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 ...

thelvin · 11/01/2011, 02h20

... 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.

08/01/2011, 16h04	#2
RomainVALERI Expert Confirmé Sénior Romain VALERI POOête Inscription : avril 2008 Messages : 2 572 Détails du profil Informations personnelles : Nom : Romain VALERI Âge : 35 Localisation : France, Meurthe et Moselle (Lorraine) Informations professionnelles : Activité : POOête Informations forums : Inscription : avril 2008 Messages : 2 572 Points : 4 073 Points : 4 073	Ici Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part 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 Modifie ton test Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part if(code~~[i]~~ == "") (cela dit, des crochets dans un name... ? ) edit : heu... [Encodage] ??? quel rapport ? __________________ ...pour les linguistes et les curieux >>> générateur de phrases aléatoires __________________
	00

08/01/2011, 17h39	#9
renaud26 Membre confirmé Inscription : mars 2003 Messages : 1 043 Détails du profil Informations personnelles : Âge : 48 Localisation : France, Puy de Dôme (Auvergne) Informations forums : Inscription : mars 2003 Messages : 1 043 Points : 285 Points : 285	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.
	00

10/01/2011, 13h31	#13
thelvin Expert Confirmé Sénior Inscription : septembre 2004 Messages : 5 049 Détails du profil Informations forums : Inscription : septembre 2004 Messages : 5 049 Points : 6 962 Points : 6 962	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.
	00

11/01/2011, 02h20	#15
thelvin Expert Confirmé Sénior Inscription : septembre 2004 Messages : 5 049 Détails du profil Informations forums : Inscription : septembre 2004 Messages : 5 049 Points : 6 962 Points : 6 962	... 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.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email