Afficher/ne pas afficher partie de formulaire [Résolu]

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>

15/03/2010, 18h17	#1
verveine47 Futur Membre du Club Inscription : juin 2009 Messages : 31 Détails du profil Informations forums : Inscription : juin 2009 Messages : 31 Points : 16 Points : 16	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
	00

16/03/2010, 00h19	#2
emmanuel.remy Expert Confirmé Emmanuel REMY Inscription : novembre 2005 Messages : 2 826 Détails du profil Informations personnelles : Nom : Emmanuel REMY Âge : 43 Informations forums : Inscription : novembre 2005 Messages : 2 826 Points : 3 560 Points : 3 560	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 __________________ Quand une tête pense seule, elle devient folle.
	00

16/03/2010, 09h49	#3
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 29 075 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 29 075 Points : 43 303 Points : 43 303	FAQ: http://javascript.developpez.com/faq...SS#affichObjet __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

16/03/2010, 14h24	#6
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 29 075 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 29 075 Points : 43 303 Points : 43 303	et id != name __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email