11486 sujets

JavaScript, DOM et API Web HTML5

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.

Je pense qu'il y a un problème avec ma fonction Eafficher(), elle ne m'affiche pas les checkbox correspondantes aux groupes

Merci

Mon code entier :
<!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>

Modifié par KevinDucrot (01 Jun 2016 - 10:39)
Merci pour cette réponse rapide.
En fait, je souhaite que les champs s'affichent atomatiquement avec onchange. C'est le cas mais le problème est que je n'arrive pas à afficher les checkboxs en fonction du groupe choisi.Tout le reste fonction bien.
Sujet clos
Aller à