Afficher/ne pas afficher partie de formulaire

**verveine47** · 15/03/2010, 18h17

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

**emmanuel.remy** · 16/03/2010, 00h19

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

**SpaceFrog** · 16/03/2010, 09h49

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

**verveine47** · 16/03/2010, 13h57

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 :

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

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 :

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

**vermine** · 16/03/2010, 14h10

Bonjour,

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

Code :

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

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 :

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

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 :

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

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 :

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

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 :

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

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

**SpaceFrog** · 16/03/2010, 14h24

et id != name

**verveine47** · 16/03/2010, 14h29

Merci ça fonctionne

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

Afficher/ne pas afficher partie de formulaire

JavaScript

Vue hybride

Discussions similaires

Partager

Partager