Contrôle de formulaire

**yoyoz** · 21/11/2011, 16h58

Bonjour,
Je genere un formulaire html, un des champs demande le nombre de couleur dans une liste deroulante alant de 1 à 4.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
Nombre de couleur :
<select name="nombre_couleur" id="nombre_couleur" OnChange="ajoutChamp()" >
  <option value="0" selected="selected">Nombre de couleur...</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>
<br />
<br />
<div id = "namecolor"></div>

En fonction de ce choix il y a autant de zone texte intitulé nom_couleurX (ou X est une incrementation de 1 à 4) générées par un code javascipt :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
function ajoutChamp(){
	index = document.ajoutCliche.nombre_couleur.selectedIndex;
	code = "";
	for (i=0;i<=(index - 1);i++) {
		code += "Nom Couleur " + (i+1) +" : <input type=\"text\" name=\"nom_couleur" + i + " id=\"nom_couleur" + i +"\" />\n";
	 }
 
	//alert('' + code);
		document.getElementById("namecolor").innerHTML = code;
 
}

Mon probleme est que je cherche à vérifier que certains champs de mon formulaire soient bien renseignés. Je fais cela par une fonction javascript via un OnClick du bouton valider :

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
function testform(){
 
var msg = "Merci de choisir :\n" ; 
lgMsg = msg.length ;
index = document.ajoutCliche.nombre_couleur.selectedIndex;
		(...)
if(document.getElementById("nombre_couleur").value == 0)
				{
						msg += "> un nombre de couleur\n";
						}
 
		for (i=0;i<=(index - 1);i++) {
			if(document.getElementById("nom_couleur" + i + "").value == 0)
				{
						msg += "> un nom de couleur " + (i+1) + "\n";
						}
 
									}
 
//si le message d'erreur ne recoit pas de concatenation en plus alors c'est qu'il n'y a pas d'erreur, le formulaire peut donc etre transmis
				if ( msg.length > lgMsg ) {
		 		alert(msg) ;
		       return false;
		        } else {
         return true; }
}

Les tests de remplissage du formulaire fonctionnent tres bien sauf sur les champs nom_couleurX. Pourriez vous m'aider à comprendre mon erreur ?
Merci

**Rachel** · 21/11/2011, 22h25

bon, comme tu n'as posté l'intégralité du code html, j'ai fait avec

.

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
 
<html>
<body>
Nombre de couleur :
<form name="ajoutCliche">
<select name="nombre_couleur" id="nombre_couleur" OnChange="ajoutChamp(this)" >
  <option value="0" selected="selected">Nombre de couleur...</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>
<input type="button" onclick="testform(ajoutCliche.nombre_couleur);" />
</form>
<br />
<br />
<div id = "namecolor"></div>
<script>
function ajoutChamp(liste){
	var index = liste.selectedIndex;
	var code = "";
	for (var i=0;i<=(index - 1);i++) {
		code += 'Nom Couleur '+(i+1)+' : <input type="text" name="nom_couleur'+i+'" id="nom_couleur'+i+'"><br>';
	 }
document.getElementById("namecolor").innerHTML = code;
}
 
function testform(liste){
 
var msg = "Merci de choisir :\n" ; 
lgMsg = msg.length ;
index = liste.selectedIndex;
if(liste.options[index].value == 0)
				{
						msg += "> un nombre de couleur\n";
						}
 
		for (i=0;i<=(index - 1);i++) {
			if(document.getElementById("nom_couleur"+i).value == 0)
				{
						msg += "> un nom de couleur " + (i+1) + "\n";
						}
 
									}
 
//si le message d'erreur ne recoit pas de concatenation en plus alors c'est qu'il n'y a pas d'erreur, le formulaire peut donc etre transmis
				if ( msg.length > lgMsg ) {
		 		alert(msg) ;
		       return false;
		        } else {
         return true; }
}
</script>
</body>
</html>

ton erreur sur les contrôles des champs de couleur se situait au fait que tu faisais

Code :

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

select.value

il fallait faire

Code :

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

select.options[index].value

tu utilise le tableau des options de ton select à l'index sélectionné

signale moi si je ne suis pas assez clair !

**dukej** · 21/11/2011, 22h31

Envoyé par rotrevrep

ton erreur sur les contrôles des champs de couleur se situait au fait que tu faisais

Code :

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

select.value

il fallait faire

Code :

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

select.options[index].value

tu utilise le tableau des options de ton select à l'index sélectionné

signale moi si je ne suis pas assez clair !

En fait tu as tord. Ecrire select.value est tout à fait valable et fonctionnel, et ce depuis IE5.5, ce sont les anciens navigateurs tous moisis qui obligeaient de faire un select.options[select.selectedIndex] mais c'est fini tout ça, le temps est révolu, place au select.value :o

**Rachel** · 22/11/2011, 00h01

Envoyé par dukej

En fait tu as tord. Ecrire select.value est tout à fait valable et fonctionnel, et ce depuis IE5.5, ce sont les anciens navigateurs tous moisis qui obligeaient de faire un select.options[select.selectedIndex] mais c'est fini tout ça, le temps est révolu, place au select.value :o

:S tu as raison.

**yoyoz** · 23/11/2011, 10h28

Bonjour et merci de vous être poser sur mon soucis.
Avez vous une idée de où ais je fais une erreur ?
Merci

**yoyoz** · 23/11/2011, 11h56

Je me permet de vous joindre tout le code html :

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
 
<html>
<head>
<title>Ajout cliché</title>
 
<link href="css/site.css" rel="stylesheet" type="text/css" />
<link href="css/calendrier.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="js/calendrier.js"></script>
	<script type="text/javascript" src="js/testformulaire.js"></script>
</head>
 
<body>
 
 
<form action="traitementAjout.php" method="post" name="ajoutCliche" >
<h3>
<br />
Date de création :
<input type="text" name="date_creation" id="date_creation" value="23/11/2011" onclick="var date_crea = new calendar(this);"/>
<br />
<br />
Date de derniére utilisation :
<input type="text" name="date_derniere_utilisation" id="date_derniere_utilisation" value="23/11/2011" onclick="var date_dern = new calendar(this);"/>
<br />
<br />
Numéro de tiroir :
<input type="text" name="numero_tiroir" id="numero_tiroir" />
<br />
<br />
Format de pochette (extérieur) :
<input type="text" name="format_pochette" id="format_pochette" />
<br />
<br />
Nom du client :
<input type="text" name="nom_client" id="nom_client" />
<br />
<br />
Désignation :
<input type="text" name="designation" id="designation" />
<br />
<br />
Référence client :
<input type="text" name="reference_client" id="reference_client" />
<br />
<br />
Nombre de couleur :
<select name="nombre_couleur" id="nombre_couleur" OnChange="ajoutChamp()" >
  <option value="0" selected="selected">Nombre de couleur...</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>
<br />
<br />
<div id = "namecolor"></div>
<br />
<br />
Laize :
<input type="text" name="laize" id="laize" />
<br />
<br />
Epaisseur Poly (dernière fabrication) :
<input type="text" name="epaisseur_poly" id="epaisseur_poly" />
<br />
<br />
<input name="valider" type="submit" value="Valider" OnClick="return testform()"/>  <input name="annuler" type="reset" value="Annuler" />  <input name="accueil" type="submit" value="retour" />
</h3>
</form>
</body>
</html>

**NoSmoking** · 23/11/2011, 18h19

Bonjour,
visiblement un problème de guillemet/quote sur cette ligne
code += "Nom Couleur " + (i+1) +" : <input type=\"text\" name=\"nom_couleur" + i + " id=\"nom_couleur" + i +"\" />\n";.
tu ne fermes pas la chaine du name, preféres cette écriture
code += 'Nom Couleur ' + (i+1) +' : <input type="text" name="nom_couleur' + i +'" id="nom_couleur' + i +'" />\n';

**yoyoz** · 24/11/2011, 09h29

Mille merci !
Quand on a trop le nez dedans on a du mal à voir ces/ses bêtises

Contrôle de formulaire

JavaScript

Discussions similaires

Partager

Partager