Afficher un champ si une checkbox est cochée

**Toiine** · 25/11/2014, 12h32

Bonjour,

alors voilà, je n'ai jamais réellement utilisé javascript, mais pour le besoin que j'ai, c'est apparemment la solution la plus viable.

Donc comme l'indique l'intitulé du sujet, je cherche à afficher un champ (input text) uniquement si une checkbox est cochée.
Et que ce champ disparaisse si elle est décochée par la suite (en conservant la valeur précédemment entrée comme valeur par défaut si on la coche à nouveau de préférence, mais bon c'est pas essentiel).

Voici mon code :

Code html :

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
 
<html>
	<title>Demande d'inscription à une formation</title>
	<body>
 
			<script type="text/javascript">
                                document.getElementById("hiddenField").style.display = "none";
 
                                function display()
                                {
                                var formOrg = document.getElementsByTagName("input")[0];
                        
                                if(formOrg.checked)
                                {
                                        document.getElementById("hiddenField").style.display = "block";
                                }
                                else
                                {
                                        document.getElementById("hiddenField").style.display = "none";
                                }
                                }
                        </script>
 
		<table>
			<form name="formation" action="fillDB.php" method="post">
 
			<tr>
   				<td>Intitulé de la formation :</td>
   				<td><input type="text" name="formTitle" value="" /></td>
			</tr>
			<tr>
   				<td>Date de commencement de la formation :</td>
   				<td><input type="text" name="startDate" value="" /></td>
			</tr>			
			<tr>
   				<td>Durée de la formation :</td>
   				<td><input type="text" name="formTime" value="" /></td>
			</tr>
			<tr>
   				<td>Lieu de la formation :</td>
   				<td><input type="text" name="formLocation" value="" /></td>
			</tr>	
			<tr>
 
			 	<td><input type="checkbox" name="company" onClick="display();"/> Organisée par la compagnie</td> 
			 	<td></td>
			 </tr>
 
			<p id="hiddenField">
			 <tr> 
				 <td>Nom de la délégation organisatrice :</td>	
				 <td><input type="text" name="formOrg" value="" /></td>
			</tr>
			</p>
 
			</form>
		</table>
	</body>
</html>

Plus précisément, je cherche à afficher/cacher tout le contenu entre les balises <p> en fonction de la checkbox.

Avec ce code, rien ne se passe lorsque je coche la checkbox, et le champ est affiché par défaut.
Donc j'imagine que j'ai mal fait quelque chose.

Amicalement.

**Bovino** · 25/11/2014, 12h44

JavaScript manipule le DOM et le DOM est créé à partir de la structure HTML de la page. Cela présuppose donc que le code HTML est valide (ou tout du moins un minimum correct) pour que l'ensemble puisse fonctionner de façon cohérente (et prévisible).
Or ton code HTML est invalide. Notamment, tu ne peux pas entourer une ligne de tableau par une balise <p>. Bien que permissive, la syntaxe d'une table HTML est relativement stricte sur l'imbrication possible des balises.

[HS]

Demande d'inscription à une formation

J'espère qu'il s'agit pas de formations en développement Web !

[/HS]

**Toiine** · 25/11/2014, 13h45

Envoyé par Bovino

J'espère qu'il s'agit pas de formations en développement Web !

Non, pas de souci à ce niveau là ^^'.

Du coup, il est possible de rendre tout cela fonctionnel en enlevant la balise <p> du tableau et d'associer l'id hiddenField à la balise <tr> que je souhaite masquer ?

Code html :

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

1
2
3
4
<tr id="hiddenField"> 
<td>Nom de la délégation organisatrice :</td>	
<td><input type="text" name="formOrg" value="" /></td>
</tr>

De cette manière la ligne disparaît lorsque je coche la case (pour rappel je cherche à faire l'inverse) mais ne réapparait jamais...

**sipatsymasaka** · 01/12/2014, 12h04

Envoyé par Toiine

De cette manière la ligne disparaît lorsque je coche la case (pour rappel je cherche à faire l'inverse) mais ne réapparait jamais...

D'où le radio que l'utilisateur ne peut plus désélectionner.

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
<html>
	<title>Demande d'inscription à une formation</title>
	<body>
 
			<script type="text/javascript">
 
				function display()
				{
 
    				if(document.getElementById('mine').checked)
    				{
        				document.getElementById("hiddenField").style.display = "none";
    				}
    				else
   				{
        				document.getElementById("hiddenField").style.display = "block";
    				}
				}
			</script>
 
		<table>
			<form name="formation" action="fillDB.php" method="post">
 
			<tr>
   				<td>Intitulé de la formation :</td>
   				<td><input type="text" name="formTitle" value="" /></td>
			</tr>
			<tr>
   				<td>Date de commencement de la formation :</td>
   				<td><input type="text" name="startDate" value="" /></td>
			</tr>			
			<tr>
   				<td>Durée de la formation :</td>
   				<td><input type="text" name="formTime" value="" /></td>
			</tr>
			<tr>
   				<td>Lieu de la formation :</td>
   				<td><input type="text" name="formLocation" value="" /></td>
			</tr>	
			<tr>
 
			 	<td><input type="radio" id="mine" name="company" onClick="display();"/> Organisée par la compagnie</td> 
			 	<td></td>
			 </tr>
 
 
			 <tr id="hiddenField" style=" display: block;"> 
				 <td>Nom de la délégation organisatrice :</td>	
				 <td><input type="text" name="formOrg" value="" /></td></p>
			</tr>
 
 
 
			</form>
		</table>
	</body>
</html>

**Toiine** · 03/12/2014, 15h20

J'ai fini par y arriver via l'utilisation d'une fonction en js qui prenait l'id en paramètre et utilisait une globale pour setter à checked ou non.

Afficher un champ si une checkbox est cochée

JavaScript

Discussions similaires

Partager

Partager