Cacher des champs grace aux boutons radios

**SonnyFab** · 15/11/2010, 10h07

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 :

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
  <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>
<!-- Champ à cacher -->
 
	 <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="submit" value="Enregistrer"/> -->
      <input type="reset" value="Annuler" />
      </p>
 
  </fANDm>
    </div></div>

Merci

**scourjean** · 15/11/2010, 10h17

Bonjour,

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

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

**SonnyFab** · 15/11/2010, 10h47

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 :

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

<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

**andry.aime** · 15/11/2010, 10h54

Bonjour,

Utiliser jQuery pour afficher et cacher seulement un élément, je trouve ça un peu exagérer

.

Code :

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

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

**scourjean** · 15/11/2010, 10h56

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

**SonnyFab** · 15/11/2010, 11h47

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

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