Formulaire php avec js Afficher les champs au fur et à mesure
Bonjour,
Je suis en train de créer un formulaire php. J'ai besoin dans un premier temps de s'avoir l'âge de la personne. On peut aller dans un ou plusieurs groupes en fonction de l'âge. Ceux-ci doivent être dans des balises options qui apparaissent une fois l'âge écrit. Et enfin, en fonction du champs option choisi, je souhaite afficher des créneaux dans des checkboxs.
Ex : Si vous avez 8ans, on affiche les groupes 8/13 débutant et 8/13 perfectionnement. Si on sélectionne 8/13 débutants, on aura les créneaux disponibles uniquement pour ce groupe ci.
Merci
Mon code entier :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
| <!DOCTYPE html>
<html>
<head>
<script>
// ECOLE
function showGrpEcole(){
var grp='4/5ans,6/7ans,8/13ans Débutant,8/13ans Perfectionnement'.split(',');
var age=+document.getElementById('npt').value;
// Déterminer a catégorie par appel de la fonction
var cat=categorieE(age);
console.log(age+' catégorie : '+cat);
if (!cat) return;
// Construction des éléments du select remis à zéro
// On parcourt les groupes et sélectionne ceux contenant la catégorie
var slc=document.getElementById('slc');
slc.options.length=0;
for (lng=grp.length,ndx=0;ndx<lng;ndx++){
console.log(slc+' '+grp[ndx]+' '+grp[ndx].indexOf(cat));
if (-1<grp[ndx].indexOf(cat)) slc.options[slc.options.length]=new Option(grp[ndx],ndx);
}
}
function categorieE(age){
if (7<age) return '8/13ans';
if (5<age) return '6/7ans';
if (3<age) return '4/5ans';
alert('Vous êtes jeune ! Patientez un peu …'); return null;
}
function Eafficher() {
var liste, texte;
liste = document.getElementById("slc");
texte = liste.options[liste.selectedIndex].text;
if (texte = '4/5ans') {document.getElementById('age4_5').style.display='block';document.getElementById('age6_7').style.display='none'; document.getElementById('debu8_13').style.display='none'; document.getElementById('perf8_13').style.display='none';}
else if (texte = '6/7ans') {document.getElementById('age4_5').style.display='none'; document.getElementById('age6_7').style.display='block';document.getElementById('debu8_13').style.display='none'; document.getElementById('perf8_13').style.display='none';}
else if (texte = '8/13ans Débutant') {document.getElementById('age4_5').style.display='none'; document.getElementById('age6_7').style.display='none'; document.getElementById('debu8_13').style.display='block';document.getElementById('perf8_13').style.display='none';}
else {document.getElementById('age4_5').style.display='none'; document.getElementById('age6_7').style.display='none'; document.getElementById('debu8_13').style.display='none'; document.getElementById('perf8_13').style.display='block';}
}
</script>
</head>
<body>
<fieldset id='coordonnees'>
<legend><h3>Coordonnées :</h3></legend>
<div>
<label for='age'>Entrez votre âge (au 1er septembre) :<sup>*</sup></label>
<input type='number' min='4' max='13' name='age' id='npt' value='' onchange='showGrpEcole()' placeholder='Ex : 8' pattern='[4-9]|(1[0-3])' title="L'age doit être compris entre 4 et 13 ans" required='Veuillez compléter ce champ !'>
</div>
</fieldset>
<br/>
<fieldset>
<legend><h3>Groupes :</h3></legend>
<div>
<label for='groupe_ecole'>Groupe Pôle École<sup>*</sup></label>
<select id='slc' name='groupe_ecole' onchange='Eafficher()'></select>
</div>
</fieldset>
<br/>
<fieldset id='creneaux'>
<legend><h3>Créneaux :</h3></legend>
<div id='age4_5' style='display:none;'><input type='checkbox' name='age4_5[]' value='choix 4-5 ans'><label for='age4_5'>Choix 4-5 ans</label></div>
<div id='age6_7' style='display:none;'><input type='checkbox' name='age6_7[]' value='choix 6-7 ans'><label for='age6_7'>choix 6-7 ans</label></div>
<div id='debu8_13' style='display:none;'><input type='checkbox' name='debu8_13[]' value='choix 8-13 ans deb'><label for='debu8_13'>choix 8-13 ans deb</label></div>
<div id='perf8_13' style='display:none;'><input type='checkbox' name='perf8_13[]' value='choix 8-13 ans perf'><label for='perf8_13'>choix 8-13 ans perf</label></div>
</fieldset>
</body>
</html> |
