13-06-2008, 12:06 PM
Tu as deux solutions pour ça qui me viennent à l'esprit.
Première méthode : JavaScript
Tu mets un attribut css "display : none;" sur les champs villages, et une petite fonction sur les boutons radios de ton formulaire lorsqu'on en change la valeur (onChange = javascript:taFonction('idchamp'). Cette fonction changera simplement l'attribut display, et donc affichera les champs.
Un petit exemple :
Première méthode : JavaScript
Tu mets un attribut css "display : none;" sur les champs villages, et une petite fonction sur les boutons radios de ton formulaire lorsqu'on en change la valeur (onChange = javascript:taFonction('idchamp'). Cette fonction changera simplement l'attribut display, et donc affichera les champs.
Un petit exemple :
Code PHP :
<?php
<script language="JavaScript">
var villagesAffiches=""; //Contient l'id des boutons affichés
function affichageContextuel(monde)
{
monde = document.getElementById(monde);
if (monde.style.display !='') //Si les boutons ne sont pas affichés, on les affiches
{
monde.style.display='';
if (avillagesAffiches!="") //Si on a déjà des boutons d'affichés, on les masque
{
villagesAffiches.style.display = 'none';
}
villagesAffiches = monde;
}
}
</script>
<table><tr> <td class="champ">Veuillez choisir votre monde</td>
<td><input type="radio" name="monde" value="terre" onChange="javascript:affichageContextuel('villages_terre');"/>Terre<br/>
<input type="radio" name="monde" value="ile" onChange="javascript:affichageContextuel('villages_ile');"/>Mer<br/>
<input type="radio" name="monde" value="ciel" onChange="javascript:affichageContextuel('villages_ciel');"/>Ciel </td>
</tr>
<tr><td></td>
<td><div id="villages_terres" style="display: none;">
<input type="radio" name="choix_villages_terre" value="Alpha" />Alpha<br/>
<input type="radio" name="choix_villages_terre" value="Bravo" />Bravo<br/>
</div>
<div id="villages_ile" style="display: none;">
<input type="radio" name="choix_villages_ile" value="Charlie" />Charlie<br/>
<input type="radio" name="choix_villages_ile" value="Delta" />Delta<br/>
</div>
<div id="villages_ciel" style="display: none;">
<input type="radio" name="choix_villages_ciel" value="Echo" />Echo<br/>
<input type="radio" name="choix_villages_ciel" value="Fox" />Fox<br/>
</div>
</td>
</tr>
</table>
Deuxième méthode : Ajax
Bon comme je ne suis pas encore un pro d'ajax, je vais te conduire vers un petit tuto ou le deuxième exemple est un peu similaire à ta question mais avec des listes de choix plutôt que des check box :
Siddh @ developpez.com