Formulaire dynamique caché

Version imprimable

Bonjour,

j'ai le code source suivant :

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
	<head>
		<title>Assemblée Générale</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<link rel="stylesheet" href="./bulletin.css" type="text/css">
 
		<script type="text/javascript">
			function afficher() { 
				if(document.getElementById("formSaisie").test.value == "non")
					document.getElementById("non").style.visibility = "block";  
				if(document.getElementById("formSaisie").test.value == "oui")
					document.getElementById("oui").style.visibility = "block";
			}
		</script>
	</head>
 
	<body>			
 
		<img src="./Montjoie_logo.jpeg" height="100px" width="300px"> <p align="center">ASSEMBLEE GENERALE du 21 juin 2012</p>
 
		<p align="center">Bulletin à retourner avant <strong>le 15 juin</strong></p>				
 
		<form method="post" action="contactAG.php" name="formSaisie" id="formSaisie">
						<table>
						 	<tr>
						    	<td><input type="radio" name="civilite" value="Mme">Mme <input type="radio" name="civilite" value="M" checked>M.<br /></td>
						    	<td><input type="text" name="nom" size="40" style="margin-left: -175px;"></td><br />
						    </tr>
							<tr>
								<td>Participation : 
									<select name="test" onChange="afficher();" id="test">
										<option value="rien"></option>
										<option value="oui">Non</option>
										<option value="non">Oui</option>
									</select>	
								</td>
							</tr>
							<tr>
								<td>
									<div id="oui" style="display:none">
										<input type="checkbox" name="participation[]" value="AG : 14h30-16h30" id="participationOui">à l'Assemblée générale (14h30 - 16h30)
									</div>
								</td><br />
								<td>
									<div id="oui" style="display:none">
										<input type="checkbox" name="participation[]" value="CA : 16h30-16h45" id="participationOui">au Conseil d'administration (16h30 - 16h45)
									</div>
								</td><br />
								<td>
									<div id="oui" style="display:none">
										<input type="checkbox" name="participation" value="Collation" id="participationOui">à la collation
									</div>
								</td><br />	
								</tr>
								<tr>
									<td>
										<div id="non" style="display:none">
											<input type="checkbox" name="participationNon[]" value="Ne Participera Pas" id="participationNon">
											<strong>ne participera pas à l'Assemblée générale</strong><br />
										</div>
									</td>		
								</tr>
							</div>
							<tr>
								<td><input type="submit" value="Envoyer"></td>
							</tr>
						</table>
 
					</form>							
 
	</body>
</html>

Quand je le lance la console avec Firefox il entre bien dans la fonction afficher() mais rien ne ce passe.

30/05/2012, 11h48
Piflo
"block" n'est pas le mot correct a utiliser pour cacher un élément

Code:

document.getElementById("non").style.visibility = 'hidden'

<edit>
heu j'ai dit une bétise, tu veut afficher, non cacher.
j'ai souvent habitude de faire sa pour afficher ou cacher un élément, si sa peut aider.
Code:

1 2 3 4 5 //pour cacher document.getElementById('non').setAttribute('hidden', 'hidden'); //pour afficher document.getElementById('non').removeAttribute('hidden');
</edit>
30/05/2012, 11h56
pejji

Oui effectivement mes checkboxes sont cachées par défaut et je voudrait les rendre visible ;)

Je vais tester,

Merci

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
	<head>
		<title>Assemblée Générale</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<link rel="stylesheet" href="./bulletin.css" type="text/css">
 
		<script type="text/javascript">
			function afficher() { 
				document.getElementById('oui').setAttribute('hidden', 'hidden');
				document.getElementById('oui2').setAttribute('hidden', 'hidden');
				document.getElementById('oui3').setAttribute('hidden', 'hidden');
				document.getElementById('non').setAttribute('hidden', 'hidden');
				if(document.getElementById('formSaisie').test.value == 'non'){
					//document.getElementById('non').setAttribute = 'visible';  
					document.getElementById('oui').removeAttribute('hidden');
					document.getElementById('oui2').removeAttribute('hidden');
					document.getElementById('oui3').removeAttribute('hidden');
				}
				if(document.getElementById('formSaisie').test.value == 'oui')
					document.getElementById('non').removeAttribute('hidden');
			}
		</script>	
 
	</head>
 
	<body onload="afficher();">		
 
		<img src="./Montjoie_logo.jpeg" height="100px" width="300px"> <p align="center">ASSEMBLEE GENERALE du 21 juin 2012</p>
 
		<p align="center">Bulletin à retourner avant <strong>le 15 juin</strong></p>				
 
		<form method="post" action="contactAG.php" name="formSaisie" id="formSaisie">
						<table>
						 	<tr>
						    	<td><input type="radio" name="civilite" value="Mme">Mme <input type="radio" name="civilite" value="M" checked>M.<br /></td>
						    	<td><input type="text" name="nom" size="40"></td><br />
						    </tr>
							<tr>
								<td>Participation : 
									<select name="test" onChange="afficher();" id="test">
										<option value="rien"></option>
										<option value="oui">Non</option>
										<option value="non">Oui</option>
									</select>	
								</td>
							</tr>
							<tr>
								<td>
									<div id="oui">
										<input type="checkbox" name="participation[]" value="AG : 14h30-16h30" id="participationOui">à l'Assemblée générale (14h30 - 16h30)
									</div>
								</td><br />
								<td>
									<div id="oui2">
										<input type="checkbox" name="participation[]" value="CA : 16h30-16h45" id="participationOui">au Conseil d'administration (16h30 - 16h45)
									</div>
								</td><br />
								<td>
									<div id="oui3">
										<input type="checkbox" name="participation" value="Collation" id="participationOui">à la collation
									</div>
								</td><br />	
								</tr>
								<tr>
									<td>
										<div id="non">
											<input type="checkbox" name="participationNon[]" value="Ne Participera Pas" id="participationNon">
											<strong>ne participera pas à l'Assemblée générale</strong><br />
										</div>
									</td>		
								</tr>
							<tr>
								<td><input type="submit" value="Envoyer"></td>
							</tr>
						</table>
 
					</form>							
 
	</body>
</html>

Comme ceci ça marche, merci.

Par contre une idée pourquoi ça ne fonctionne pas sous IE...

30/05/2012, 12h56
RomainVALERI

En tout cas tu as des id dupliqués (les checkbox).... IE ou pas, c'est pas bon... :?
30/05/2012, 13h33
pejji

Citation:

Envoyé par RomainVALERI

En tout cas tu as des id dupliqués (les checkbox).... IE ou pas, c'est pas bon... :?

Exact mais sinon ça ne fonctionnait pas...

Sinon la propriété 'hidden' est mal géré par IE...

Bonjour,

L'attribut hidden prend une valeur booléenne en javascript.
Code:

1 2 document.getElementById('oui').hidden=true;//cacher document.getElementById('oui').hidden=false;//afficher
A+.

30/05/2012, 22h09
Darkyl

Citation:

la propriété 'hidden' est mal géré par IE...

ha bon ? cela explique des bugs que je cherchais à résoudre depuis longtemps.

Faut mettre quoi à la place?

Code:

document.getElementById('oui').style.display='none';//

?

et $('#oui').hide(); je crois que c'est mal géré aussi, non?

Je vais me faire taper dessus à oser douter de jquery...
31/05/2012, 00h34
RomainVALERI

Citation:

Envoyé par Darkyl

et $('#oui').hide(); je crois que c'est mal géré aussi, non?

Je vais me faire taper dessus à oser douter de jquery...

Je ne suis pas jQueryste pratiquant ^^ mais c'est l'un des apports fondamentaux des librairies JS de lisser les particularismes de ce type... donc, sauf grosse surprise, je dirais aucun problème avec hide. Mais par pitié (:calim2:) n'ajoute pas jQuery pour ça uniquement. Si, si, on a déjà vu ce genre de choses ici... :aie:

Si tu as déjà jQuery en place pour d'autres fonctionnalités, c'est la solution totale et définitive. L'importer pour faire un effet d'apparition/disparition conditionnée... serait ubuesque.
31/05/2012, 06h57
andry.aime

Citation:

Envoyé par Darkyl

ha bon ? cela explique des bugs que je cherchais à résoudre depuis longtemps.

Faut mettre quoi à la place?

Code:

document.getElementById('oui').style.display='none';//

?

et $('#oui').hide(); je crois que c'est mal géré aussi, non?

Je vais me faire taper dessus à oser douter de jquery...

hidden est différent de display :aie:.
Et puis, je suis aussi comme vous, toujours accusé IE :mouarf:. Mais là, ceux sont les autres navigateurs qui sont fautif. Ils sont permissifs pour cet erreur. L'attribut hidden doit être de type booléen en JS.
31/05/2012, 12h11
pejji

Effectivement en mettant un booleen ça passe mieux.

On peut aussi contourner en utilisant : document.getElementById('oui').style.display = 'none';
et
document.getElementById('oui').style.display = 'block'; par exemple.

Merci, résolu pour moi.
31/05/2012, 12h17
Darkyl

Moi je disais ça, parce que j'ai des animations qui me pli une <table> à 0, pour créer une sorte d'accordéon ouvrant, mais IE, le seul, me la plis bien lors de l'anim, et aprés me la remet en heigth= valeur d'origine.

J'utilise beaucoup Jquery pour mes applications, et j'ai toujours, TOUJOURS, des soucis avec IE. Jamais sous chrome ou firefox (mais cela viens peut-être d'autres parts :D). A mon avis JQUERY a signé un pacte avec mozilla et google :aie:
31/05/2012, 14h20
RomainVALERI

Citation:

Envoyé par Darkyl

J'utilise beaucoup Jquery pour mes applications, et j'ai toujours, TOUJOURS, des soucis avec IE. Jamais sous chrome ou firefox (mais cela viens peut-être d'autres parts :D). A mon avis JQUERY a signé un pacte avec mozilla et google :aie:

Juste pour dire : jQuery a beau lisser la plupart des différences entre navigateurs au niveau JS, il n'y a pas de raison pour qu'il "corrige" magiquement le code HTML sur lequel il s'appuie. Si la structure même de la page pose un souci d'interprétation selon les navigateurs, jQuery ne sauvera pas la situation...

(Tiens ça fait bizarre.... techniquement je viens de "défendre" jQuery il me semble.. :koi: ... :cry:) (ou... même indirectement IE ? :aie:)
31/05/2012, 15h18
Loceka

De toute façon, tu ne veux probablement pas utiliser le "visibility : hidden" car il "cache" le contenu tout en conservant la place qu'il aurait prise.

Il vaut mieux passer par un "display : none" pour ça.