Afficher/masquer champs en fonction d'un bouton radio

Résolu/Fermé

Juju - 18 oct. 2012 à 16:25
Juju - 18 oct. 2012 à 20:08

Bonjour,

Je suis en train de créer une page formulaire.
j'aimerais afficher des champs en fonction du choix pro/amateur/animalerie/association que les gens vont faire, j'ai trouver un exemple mais cela ne marche pas, quelqu'un pourrais m'aider???

merci

<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#professionnel { display: none; }
#amateur { display: none; }
#animalerie {display: none; }
#association { display: none; }
</style>

</head>

<body>

<b>Provenance :
<form name="form1">
<label>Professionnel <input type="radio" name="provenance" value="pro"/></label>
<label>Amateur<input type="radio" name="provenance" value="ama"/></label>
<label>Animalerie<input type="radio" name="provenance" value="ani"/></label>
<label>Association<input type="radio" name="provenance" value="asso"/></label>
<div id="professionnel">
<label>Affixe de l'élevage <input type="text" /></label>
</div>
<div id="amateur">
<label>Prénom de l'amateur <input type="text" /></label>
<label>Département de l'amateur <input type="text"/></label>
</div>
<div id="animalerie">
<label>Nom de l'animalerie<input type="text" /></label>
<label>Département de l'animalerie<input type="text" /></label>
</div>
<div id="association">
<label>Nom de l'association <input type="text" /></label>
<label>Département de l'association<input type="text" /></label>
</div>
</form>
<script type="text/javascript">
var professionnel = document.form1.provenance[pro];
var amateur = document.form1.provenance[ama];
var animalerie = document.form1.provenance[ani];
var association = document.form1.provenance[asso];
professionnel.onclick = function()
{
document.getElementById("professionnel").style.display = "block"
};
amateur.onclick = function()
{
document.getElementById("amateur").style.display = "block"
};
animalerie.onclick = function()
{
document.getElementById("animalerie").style.display = "block"
};
association.onclick = function()
{
document.getElementById("association").styledisplay = "Block"
};
</script>

</body>
</html>

A voir également:

Afficher/masquer champs en fonction d'un bouton radio
Fonction si et - Guide
Masquer conversation whatsapp - Guide
Radio française - Télécharger - Médias et Actualité
Afficher mot de passe wifi android - Guide
Comment appeler en masquer - Guide

2 réponses

Réponse 1 / 2

ReDLoG
18 oct. 2012 à 18:23

Bonsoir,

Et comme ceci :

<html>
<head>
	<meta charset="utf-8">
	<title>Test Juju</title>
	<style type="text/css">#D1, #D2, #D3, #D4 {display: none;}</style>
	<script type="text/javascript">
	function showRadio() {
		var n = document.form.btnr.length;
		for(i=1;i<=n;i++) {
			if(document.getElementById('choix'+i).checked == true) {
				document.getElementById('D'+i).style.display = "block";
			} else {
				document.getElementById('D'+i).style.display = "none";
			}
		}
	  }
	</script>
</head>

<body>
<p><b>Provenance :</b></p>
<form name="form" action="" method="post">
	<p>
		<label>Professionnel <input type="radio" id="choix1" name="btnr" value="pro" onclick="showRadio()" /></label> 
		<label>Amateur <input type="radio" id="choix2" name="btnr" value="ama" onclick="showRadio()" /></label> 
		<label>Animalerie <input type="radio" id="choix3" name="btnr" value="ani" onclick="showRadio()"  /></label> 
		<label>Association <input type="radio" id="choix4" name="btnr" value="asso" onclick="showRadio()" /></label>
	</p>
	<div id="D1">
		<label>Affixe de l'élevage <input type="text" /></label>
	</div>
	<div id="D2">
		<label>Prénom de l'amateur <input type="text" /></label> <label>Département de l'amateur <input type="text" /></label>
	</div>
	<div id="D3">
		<label>Nom de l'animalerie <input type="text" /></label> <label>Département de l'animalerie <input type="text" /></label>
	</div>
	<div id="D4">
		<label>Nom de l'association <input type="text" /></label> <label>Département de l'association <input type="text" /></label>
	</div>
</form>
</body>
</html>

Réponse 2 / 2

Juju
18 oct. 2012 à 20:08

merci!!!!!!!!!!!!!!

Discussions similaires

programme qui n'affiche pas le mot secret

Bouton ON OFF, O ou I ?

Afficher toutes les lignes masquées excel

Discussions similaires

Newsletters