Formulaire php avec js Afficher les champs au fur et à mesure

**kevinducrot** · 01/06/2016, 09h22

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**-Rpass-** · 01/06/2016, 10h29

Bonjour,

Quelle est ta question, ou ton problème ?

**kevinducrot** · 01/06/2016, 10h36

Le problème est que je n'arrives pas à afficher les checkboxs qui correspondent au groupe sélectionné
Je pense que ma function Eafficher() n'est pas correcte

**-Rpass-** · 01/06/2016, 10h57

Tu veux faire le test sur la valeur de l'option de ton select ou le texte qu'il contient ? Car dans ce cas il faudrait remplacer :

Code JS :

Sélectionner tout - Visualiser dans une fenêtre à part

texte = liste.options[liste.selectedIndex].text;

par

Code JS :

Sélectionner tout - Visualiser dans une fenêtre à part

texte = liste.options[liste.selectedIndex].value;

**kevinducrot** · 01/06/2016, 11h20

J'ai testé le changement mais en fait mes values ou mes options sont identiques donc ça ne change rien. Essayez le code sur http://www.w3schools.com/html/tryit....=tryhtml_basic ou en local, vous allez vite comprendre le problème.
Pour le groupe 4/5 ou 6/7, il ne m'affiche rien. Et pour le groupe 8/13 deb ou 8/13 perf, il m'affiche la checkbox de 4/5 ans…
Peut-etre le problème ne vient pas de la function Eafficher mais de showGrpEcole()… Je ne suis pas sur de la ligne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if (-1<grp[ndx].indexOf(cat)) slc.options[slc.options.length]=new Option(grp[ndx],ndx);

**-Rpass-** · 01/06/2016, 11h51

Effectivement cette ligne est incompréhensible, c'est illisible

Formulaire php avec js Afficher les champs au fur et à mesure

JavaScript

Vue hybride

Discussions similaires

Partager

Partager