Formulaire dynamique avec des cases de cocher (en JS)
Bonjour à tous,
Alors voilà, j'ai créé un formulaire pour des inscriptions à des visites. Les contraintes sont plutôt simples : chaque visites à plusieurs horaires, un visiteur peut s’inscrire à plusieurs visites mais à un seul horaire par visite.
Pour faire cela j'ai créé des checkbox pour chaque visites et des boutons radios pour chaque horaires. J'ai aussi fait un peu de JS pour que les horaires ne s'affichent que si la visite est cochée.
Voici mon code HTML :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <form method='POST' action='#'>
<input type='checkbox' name='visite' value='v1' onclick="affichertexte(this,1)" />Visite1
<div id='horaire1'>
<input type="radio" name='horaire1' value='h11' />horaire1
<br /><input type="radio" name='horaire1' value='h12' />horaire2
</div>
<input type='checkbox' name='visite' value='v2' onclick="affichertexte(this, 2)" />Visite2
<div id='horaire2'>
<input type="radio" name='horaire2' value='h21' />horaire1
<br /><input type="radio" name='horaire2' value='h22' />horaire2
</div>
<input type='checkbox' name='visite' value='v3' onclick="affichertexte(this,3)" />Visite3
<div id='horaire3'>
<input type="radio" name='horaire3' value='h31' />horaire1
<br /><input type="radio" name='horaire3' value='h32' />horaire2
</div>
<input type='submit' name='Valider' value='Valider' />
</form> |
Et mon petit bout de code en JS :
Code:
1
2
3
4
5
6
7
| function affichertexte(caseacocher, num){
if(caseacocher.checked){
document.getElementById("horaire"+num).style.visibility="visible";
}else{
document.getElementById("horaire"+num).style.visibility="hidden";
}
} |
A la fin de mon formulaire j'ai le bout de code ci-dessous pour que les boutons radios se cachent au chargement de la page.
Code:
1
2
3
| for(i=1;i<4;i++){
document.getElementById("horaire"+i).style.visibility="hidden";
} |
Mon soucis est le suivant, lorsque je coche une checkbox par défaut les boutons radios ne s'affichent pas à cause de ma dernière partie. Mais j’ignore quel test faire pour s'avoir si je dois afficher ou non.
Auriez-vous une idée ?
Le JavaScript est loin d'être le langage que je connais le mieux, alors n'hésitez pas de me dire si j'ai mal fait quelque chose.
En espérant avoir été clair, d'avance merci,
Lucie
