Afficher/masquer champs en fonction d'un bouton radio
Résolu
Juju
-
Juju -
Juju -
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>
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
- Radio française - Télécharger - Médias et Actualité
- Comment appeler en masquer - Guide
- Masquer conversation whatsapp - Guide
- Comment masquer les amis sur facebook - Guide
2 réponses
Bonsoir,
Et comme ceci :
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>