Afficher/ne pas afficher partie de formulaire

Version imprimable

15/03/2010, 18h17
verveine47

Afficher/ne pas afficher partie de formulaire

Bonjour à tous,

dans un formulaire html, j'ai un élément de type checkbox.
Si (et seulement si) cette case est cochée, je veux afficher d'autres champs. Sinon je ne veux pas qu'ils apparaissent.

Je ne connais pas le javascript. Il y aurait-il moyen avec un code assez simple de réaliser cela ?

Merci
16/03/2010, 00h19
emmanuel.remy

Salut,

En cas de clic sur la checkbox, tu lis l'état (coché ou pas, checked==true/false) et ensuite tu appliques le style "display:none" ou "display:block" aux éléments que tu souhaites masquer/afficher.

ERE
16/03/2010, 09h49
SpaceFrog

:roll: FAQ:
http://javascript.developpez.com/faq...SS#affichObjet

J'y connais rien en Javascript, alors j'ai regardé à droite à gauche avec vos indications.
Ci dessous mes 2 bouts de codes: ma partie Js et ma partie html.
Je compte intégrer le js dans mon html. Si j'ai bien compris, on met le code js dans le <head> et dans le body on appelle seulement la fonction.
L'idée est d'avoir au chargement de la page la checkbox principale (bennes) affichée et non cochée. Et si la box est cochée par un clic, afficher la box "benne1".
Code:

1 2 3 4 5 6 7 8 9 10 11 <script type="text/javascript"> function afficher() { var objet = document.getElementById(benne1); if(window.document.bennes.bennes.checked=true) {document.getElementById(benne1).style.display = "block";} else {document.getElementById(benne1).style.display = "none";} } </script>
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 <html> <head> </head> <body> <form method="get" action="xxxxx" name="bennes"> <table> <tr> <td>Benne(s) pleine(s) : </td> <td> <input type="checkbox" value="unchecked" name="bennes"> </td> </tr> <tr id="benne1"> <td> </td> <td>Benne 1 </td> <td> <input type="checkbox" value="unchecked" name="benne1"> </td> </tr> </table> </form> </body> </html>
Merci de votre aide, car j'ai d'autres choses en cours d'apprentissage et j'ai pas envie d'apprendre le js.

Buvons un coup ma serpette est perdue ♫

Bonjour,

Si vous ne voulez pas que benne1 soit affiché, alors cachez-le dès sa création:
Code:

1 2 <input type="checkbox" value="unchecked" name="benne1" style="display:none">
Ensuite, il y a des petites erreurs de syntaxe. D'abord, vous récupérez un objet:
Code:

1 2 var objet = document.getElementById(benne1);
Première erreur, l'avoir appelé "objet". C'est peut-être un mot réservé (object est réservé en tout cas). Deuxième erreur, c'est que getElementById, comme son nom l'indique, cherche l'objet selon un id et l'argument est une chaine de caractères:
Code:

1 2 var mon_objet = document.getElementById("benne1");
Ca fonctionnera sous IE mais normalement vous devez avoir un id sur votre checkbox.
Dans votre code, vous récupérez cet objet mais vous ne vous en servez jamais, vous le rerécupérez à chaque fois. :-/
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 function afficher() { var mon_objet = document.getElementById("benne1"); if(window.document.bennes.bennes.checked=true) { mon_objet.style.display = "block"; } else { mon_objet.style.display = "none"; } }
Mais ce n'est toujours pas correct. Dans votre if, vous faites une assignation au lieu de faire une comparaison, et puis autant récupérer l'objet de la même manière (mais mettez leurs des id):
Code:

1 2 if(document.getElementById("bennes").checked==true)

16/03/2010, 14h24
SpaceFrog

et id != name

Merci ça fonctionne

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
<html>
	<head>
 
		<script type="text/javascript">
			function afficher()
{
    var mon_objet = document.getElementById("benne1");
    if(document.getElementById("bennes").checked==true)
    {
          mon_objet.style.display = "block";
     }
     else
    {
         mon_objet.style.display = "none";
     }
}
 
		</script>
	</head>
	<body>		
		<form method="get" action="xxxxx">
		<table>
			<tr>
				<td>Benne(s) pleine(s) : 
				</td>
				<td>
					<input type="checkbox" value="unchecked" id="bennes" onCLick="afficher()">
				</td>
			</tr>
 
			<tr id="benne1" style="display:none">
				<td>
				</td>
				<td>Benne 1
				</td>
				<td>
					<input type="checkbox" value="unchecked">
				</td>
			</tr>
</table>
	</form>
	</body>
</html>