Cacher des champs grace aux boutons radios

Version imprimable

Bonjour,
Je suis un nouveau en javascript.
J'ai deux boutons radio Oui et Non qui est coché par défaut sur non, et des champs de saisies en dessous. J'aimerais que lorsque l'internaute clic sur oui, le navigateur affiche les champs en dessous qui était auparavant caché.

En asp.net j'utilisais des panels mais à chaque fois il fallait aller sur le server or j'ai lu que le javascript s'exécutait coté client.

Si je peux avoir un indice où chercher ou un tuto qui peux m'expliquer la démarche ce serait gentil.

Voici un bout de 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 <div id="co_5" class="mon_contenu" style="display: none;"> <div id="fANDmulaire"> <fANDm action="" method="post" enctype="multipart/fANDm-data"> <fieldset> <table width="100%" cellspacing="5"> <tr> <td colspan="2"><label fAND="dispo">Le véhicule est-il panne? :</label></td> <td> <table><tr> <td><label fAND="oui"> Oui </label><input type="radio" name="dispo" value="oui" id="oui"/></td> <td> <label fAND="non"> Non </label><input type="radio" name="dispo" value="non" id="non" checked="checked"/></td></tr> </table>  <tr> <td colspan="2"><label fAND="nomPanne">Nom de la panne :</label></td> <td><input type="text" name="nomPanne" id="nomPanne" size="16" maxlength="30"/></td></tr> <tr> <td colspan="2"><label fAND="nomChauff">Nom du chauffeur :</label></td> <td><input type="text" name="nomChauff" id="nomChauff" size="16" maxlength="30"/></td> <tr> <td colspan="2"><label fAND="comment">Commentaire (facultatif) :</label></td> <td><textarea name="comment" id="comment"></textarea></td></tr> </table> <br /> </fieldset> <p>  <input type="reset" value="Annuler" /> </p> </fANDm> </div></div>
Merci

Bonjour,

Voilà un petit exemple avec jQuery, j'ai essayé de te mettre des commentaires pour que tu comprennes le principe :

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 xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
		<script>
		// Une fois que la page est chargee
		$(document).ready(function(){
			// On ajoute l'evenement change à la balise input qui a pour "name=choix", cet évènement se declenchera à chaque changement de valeur de l'input
			$("input[name=choix]").change(function(){
				if($(this).attr("value")=="1")
				{
					// Si la valeur de l'input == 1 alors on affiche le div qui a pour "id=divCacher".
					$("#divCacher").show();
				}
				else
				{
					// Si la valeur de l'input == 2 alors on cache le div qui a pour "id=divCacher".
					$("#divCacher").hide();
				}
			});
		});
		</script>
	</head>
	<body>
		<input type="radio" name="choix" value="1" />Oui
		<input type="radio" name="choix" value="2" />Non
		<div id="divCacher" style="display:none;">blabla</div>
	</body>
</html>

Sinon si tu veux aller plus loin ou pour plus d'explications :
http://docs.jquery.com/Main_Page

15/11/2010, 10h47
SonnyFab

Wahou jusque là je te suis scourjean merci encore mais comme je t'ai dis (si tu permets que je te tutoie) mais je lis depuis quelques jour le javascript.

Mais c'est quoi cette source:

Code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>

?

Si j'ai pas le web , exemple en local sur ma machine esque sa pourrait passer?

Merci

Bonjour,

Utiliser jQuery pour afficher et cacher seulement un élément, je trouve ça un peu exagérer ;).
Code:

1 2 3 4 5 6 7 8 function afficherCacher(){ if(document.getElementById('oui').checked){ document.getElementById('divCacher').style.display="block"; }else if (document.getElementById('non').checked) { document.getElementById('divCacher').style.display="none"; } }
Edit :
Si tu veux utiliser jQuery en local tu peux le telecharger sur son site officiel

A+.

15/11/2010, 10h56
scourjean

Bien sur tu peux tester en local, là j'ai mis une source externe.

jQuery est un framework javascript qui te facilitera beaucoup de chose. La documentation est bien fourni en exemple pour comprendre. Tu peux télécharger le fichier jquery sur http://code.jquery.com/jquery-1.4.4.min.js

Edit :adry.aime remarque judicieuse

Merci ces codes passent bien dans mes testes, sauf que le code de adry.aime ne passe pas chez moi
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <script language="javascript"> function afficherCacher(){ if(document.getElementById('oui').checked){ document.getElementById('divCacher').style.display="block"; }else if (document.getElementById('non').checked) { document.getElementById('divCacher').style.display="none"; } } </script> </head> <body> <input type="radio" name="choix" value="oui" onClick="afficherCacher();" />Oui <input type="radio" name="choix" value="non" onClick="afficherCacher();" />Non <div id="divCacher" style="display:none;">blabla</div> </body> </html>
Je sais pas à quel niveau se situe mon erreur.

Pourtant scourjean ton code est opérationnel mais comme j'utilise des onglets dans mon formulaire sa a du mal à s'exécuter normalement j'essaie encore et je te refais signe merci

15/11/2010, 11h50
scourjean

Pour que le code de andry.aime fonctionne tu dois mettre un id="oui" et un id="non" à tes input sinon document.getElementById() ne trouvera pas
15/11/2010, 11h57
andry.aime

Et oui,
Dans ton ancien code, tu avais utilisé ces id c'est pour ça que je les ai pris pour dans l'exemple :)

Citation:

<td><label fAND="oui"> Oui </label><input type="radio" name="dispo" value="oui" id="oui"/></td>
<td> <label fAND="non"> Non </label><input type="radio" name="dispo" value="non" id="non" checked="checked"/></td></tr>
15/11/2010, 12h08
SonnyFab

Je suis pas assez intelligent :mouarf:

Merci c'est génial