Afficher un champ si une checkbox est cochée

Version imprimable

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:

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.

25/11/2014, 12h44
Bovino

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]

Citation:

Demande d'inscription à une formation

J'espère qu'il s'agit pas de formations en développement Web ! :aie:
[/HS]
25/11/2014, 13h45
Toiine
Citation:

Envoyé par Bovino

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

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:

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

Citation:

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:

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>

03/12/2014, 15h20
Toiine

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.