afficher un div quant un radio button est coché !

Eléphant du PHP | 353 Messages

17 janv. 2006, 20:35

Salut , je connais pour ainsi dire rien en javascript ! alors avant de developper qqch , je voudrais savoir si c'est possible d'afficher un div quand un certain radio button est coché ! le tout sans faire un refresh de page ! merci ;)

Modérateur PHPfrance
Modérateur PHPfrance | 7636 Messages

17 janv. 2006, 21:44

oui c'est possible, come ceci:

Javascript
<script type="text/javascript">
function afficher(etat)
{   
    document.getElementById("champ").style.visibility=etat;   
}
</script>
HTML
<div id="champ">Affichage du div</div>  
  
<form name="formulaire" id="formulaire" action="" method="">
	afficher <input type="radio" name="choix" value="oui" onclick="afficher('visible');" checked>
	cacher <input type="radio" name="choix" value="non" onclick="afficher('hidden');">
</form>

/!\ Avant de poster se documenter et rechercher.
Qui ne sait pas rendre un service n'a pas le droit d'en demander.
MaBrute

Eléphant du PHP | 353 Messages

17 janv. 2006, 22:36

Salut , merci pour ta reponse , ca se presente comme ça chez moi mais ca n'as pas l'ai de fonctionner , ais je commis une erreur ?

le code javascript est dans le <head>
<tr>
					<td>
					<input name="optToWhom" type="radio" value="1" checked="checked"  onselect="afficher('hidden');"/>					</td>
					<td>
					Enkel de gevalideerde emailadressen					</td>
				</tr>
				<tr>
					<td>
					<input name="optToWhom" type="radio" value="0"  onselect="afficher('hidden');"/>					</td>
					<td>
					Enkel de NIET gevalideerde emailadressen					</td>
				</tr>
				<tr>
					<td>
					<input name="optToWhom" type="radio" value="*"  onselect="afficher('hidden');"/>					</td>
					<td>
					Iedereen, gevalideerd of niet					</td>
				</tr>
				<tr>
					<td>
					<input name="optToWhom" type="radio" value="?" onselect="afficher('visible');"/>					</td>
					<td>
					Selectieve lijst 
	</td>
				</tr> 
<div id="champ" style=" visibility:hidden">
				<tr>
				<td>Choisir les contacts</td>
				</tr>
</div> 
merci ;)

Modérateur PHPfrance
Modérateur PHPfrance | 7636 Messages

17 janv. 2006, 22:50

un exemple complet:
<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" xml:lang="fr" />
<title>Masquer/Afficher au clic de souris</title>
<meta http-equiv="Content-language" content="FR-fr" xml:lang="fr" dir="ltr" />
<script type="text/javascript">

function afficher(etat)
{   
    document.getElementById("champ").style.visibility=etat;   
}

</script>
</head>
<body>   

   <div id="champ">Affichage du div</div>  
  
<form name="formulaire"  action="" method="" >

Afficher <input type="radio" name="choix" value="oui" onclick="afficher('visible');" checked="checked" />
Cacher <input type="radio" name="choix" value="non" onclick="afficher('hidden');" />

</form>

</body>
</html>
tu as surtout une mauvaise construction avec le tableau:
 </td>
                </tr>
<div id="champ" style=" visibility:hidden">
                <tr>
                <td>Choisir les contacts</td>
                </tr>
</div>
le <div> imbriqué dans le tableau !! Ferme le tableau et ouvre le div après.

/!\ Avant de poster se documenter et rechercher.
Qui ne sait pas rendre un service n'a pas le droit d'en demander.
MaBrute

Eléphant du PHP | 353 Messages

17 janv. 2006, 22:57

ok pour le tableau mais le visibility ne change pas !

j'ai fais comme ça =>
				<tr>
					<td>
					<input name="optToWhom" type="radio" value="?" onselect="afficher('visible');"/>					</td>
					<td>
					Selectieve lijst 
	</td>
				</tr>
				

			</table>
			<div id="champ">Choisir les contacts</div>	
Pourtant il est vrai que ton code est parfaitement logique

Modérateur PHPfrance
Modérateur PHPfrance | 7636 Messages

17 janv. 2006, 23:00

remplace "onselect" par "onclick"

/!\ Avant de poster se documenter et rechercher.
Qui ne sait pas rendre un service n'a pas le droit d'en demander.
MaBrute

Eléphant du PHP | 353 Messages

17 janv. 2006, 23:03

ok merci je venais de le tester , ca fonctionne ! merci à toi !

pq ca fonctionne pas avec onselect ?

le principale, c'est que ca fonctionne , je mets reglé ;)

Modérateur PHPfrance
Modérateur PHPfrance | 7636 Messages

17 janv. 2006, 23:06

parceque le "onSelect" est reservé pour la séléction de texte, donc tous les champs de type "texte", regarde les affectations possible

/!\ Avant de poster se documenter et rechercher.
Qui ne sait pas rendre un service n'a pas le droit d'en demander.
MaBrute

Eléphant du PHP | 353 Messages

17 janv. 2006, 23:08

merci pour ce lien !! et encore merci pour l'aide ++ :wink:

Modérateur PHPfrance
Modérateur PHPfrance | 7636 Messages

17 janv. 2006, 23:12

de rien, si tu veux encore plus de javascript regarde aussi ceci :wink:

/!\ Avant de poster se documenter et rechercher.
Qui ne sait pas rendre un service n'a pas le droit d'en demander.
MaBrute

Eléphant du PHP | 353 Messages

18 janv. 2006, 00:14

thanks :lol:

thanks
Invité n'ayant pas de compte PHPfrance

03 mai 2011, 17:08

Parfait, c'est simple. Merci beaucoup.