Un contrôle de formulaire qui ne fonctionne pas

**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é :

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 !

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.

**thelvin** · 08/01/2011, 16h57

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

**ABCIWEB** · 08/01/2011, 17h04

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>

**thelvin** · 08/01/2011, 20h22

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.

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.

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.

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

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

Un contrôle de formulaire qui ne fonctionne pas

JavaScript

Vue hybride

Discussions similaires

Partager

Partager