IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

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


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre à l'essai
    Homme Profil pro
    Webmaster
    Inscrit en
    Juin 2016
    Messages
    5
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Juin 2016
    Messages : 5
    Par défaut 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 : 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>

  2. #2
    Membre très actif
    Homme Profil pro
    Déveleoppeur Web/Mobile
    Inscrit en
    Avril 2013
    Messages
    330
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Déveleoppeur Web/Mobile
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Avril 2013
    Messages : 330
    Par défaut
    Bonjour,

    Quelle est ta question, ou ton problème ?

  3. #3
    Membre à l'essai
    Homme Profil pro
    Webmaster
    Inscrit en
    Juin 2016
    Messages
    5
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Juin 2016
    Messages : 5
    Par défaut
    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

  4. #4
    Membre très actif
    Homme Profil pro
    Déveleoppeur Web/Mobile
    Inscrit en
    Avril 2013
    Messages
    330
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Déveleoppeur Web/Mobile
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Avril 2013
    Messages : 330
    Par défaut
    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;

  5. #5
    Membre à l'essai
    Homme Profil pro
    Webmaster
    Inscrit en
    Juin 2016
    Messages
    5
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Juin 2016
    Messages : 5
    Par défaut
    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);

  6. #6
    Membre très actif
    Homme Profil pro
    Déveleoppeur Web/Mobile
    Inscrit en
    Avril 2013
    Messages
    330
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Déveleoppeur Web/Mobile
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Avril 2013
    Messages : 330
    Par défaut
    Effectivement cette ligne est incompréhensible, c'est illisible

Discussions similaires

  1. Réponses: 2
    Dernier message: 09/10/2015, 17h53
  2. Réponses: 2
    Dernier message: 06/10/2011, 09h27
  3. Réponses: 0
    Dernier message: 28/09/2011, 17h32
  4. Réponses: 3
    Dernier message: 04/06/2010, 22h57
  5. Réponses: 5
    Dernier message: 23/04/2007, 13h37

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo