Formulaire dynamique caché

**pejji** · 30/05/2012, 10h36

Bonjour,

j'ai le code source suivant :

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

**Piflo** · 30/05/2012, 11h48

"block" n'est pas le mot correct a utiliser pour cacher un élément

Code :

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

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 :

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

1
2
3
4
5
//pour cacher
document.getElementById('non').setAttribute('hidden', 'hidden');
 
//pour afficher
document.getElementById('non').removeAttribute('hidden');

</edit>

**pejji** · 30/05/2012, 11h56

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

Je vais tester,

Merci

**pejji** · 30/05/2012, 12h16

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

**RomainVALERI** · 30/05/2012, 12h56

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

**pejji** · 30/05/2012, 13h33

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

**andry.aime** · 30/05/2012, 13h56

Bonjour,

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

Code :

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

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

A+.

**Darkyl** · 30/05/2012, 22h09

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 :

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

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

**RomainVALERI** · 31/05/2012, 00h34

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é (

) n'ajoute pas jQuery pour ça uniquement. Si, si, on a déjà vu ce genre de choses ici...

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.

**andry.aime** · 31/05/2012, 06h57

Envoyé par Darkyl

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

Faut mettre quoi à la place?

Code :

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

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

.
Et puis, je suis aussi comme vous, toujours accusé IE

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

**pejji** · 31/05/2012, 12h11

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.

**Darkyl** · 31/05/2012, 12h17

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

). A mon avis JQUERY a signé un pacte avec mozilla et google

**RomainVALERI** · 31/05/2012, 14h20

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

). A mon avis JQUERY a signé un pacte avec mozilla et google

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

...

) (ou... même indirectement IE ?

)

**Loceka** · 31/05/2012, 15h18

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.

Formulaire dynamique caché

JavaScript

Discussions similaires

Partager

Partager