Générer un formulaire à partir de données json

**ronarthas** · 23/07/2018, 15h58

Bonjour à vous,

Voilà ça fait 4h que je cherche d'ou vien l'erreur de ce code (rien afficher dans la console):

JS:

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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
 
var inputLundi;
var inputMardi;
var inputMercredi;
var inputJeudi;
var bac;
var section;
var choixAnnee;
var valeur;
var verif = 0;
 
 
 
function choix() //fonction appellé sur le click de bouton
{
 
              choixAnnee =  document.getElementById('choixAnnee').value; // on récupére l'année saisie dans el formulaire
              var choixEcole = document.getElementById('choixEcole').value; // on récupére l'école saisie dans le formulaire
               section = document.querySelector('.test:checked').value; // on récupére si oui ou non l'élève et en section informatique
 
               console.log(choixEcole);
  for (var i = 1; i <= ligne; i++)  // compteur qui se base sur le nombre de ligne que conient mon tableau activité de ma base de $donnees
  {
 
        var compteurValue="a"+i; // généré un nom à ma varibale contenant un  mon JSON qui va me permetter de pouvoir le parcourir car à cause de php quand je génére avec la focntion json_encode il me met des chiffres pour nom de collection qui génère erreur pour parcourir
        var value= tab[compteurValue][0]; // varibale qui contient le nom de l'activité
        var classe= tab[compteurValue][2]; // variable qui contient le type activité sportiv ou artistique
        var nbPlace= tab[compteurValue][1]; // le nombre de place restante dans cette activité
        var campus = tab[compteurValue][3]; // le nom de l'école ou cette activité est disponible
        var jour = tab[compteurValue][4]; // le jour ou une activité peut être pratiqué
 console.log(i);
 
    if (choixEcole == campus) // si le choix fait dans le formulaire est le même que celui de la collection JSON et que le choix de l'année n'est pas vide alors
 
    {
 
 
 
            if (jour == 'lundi')// on va comparer la variable jour avec un jour de la semaine si c'est exact alors on ajoute à la variable le code html d'une balise input  
            {
              input = "<p><label id='c"+classe+"'><input type='radio' name='jour' value='"+value+"'id='"+classe+"' onchange='verification()'/><span>"+value+" "+nbPlace+" place restantes</span></label></p>";
              inputLundi = inputLundi+input;
 
 
            }
 
            if (jour == 'mardi')
            {
              input = "<p><label id='c2"+classe+"'><input type='radio' name='jour2' value='"+value+"'id='"+classe+"' onchange='verification()'/><span>"+value+" "+nbPlace+" place restantes</span></label></p>";
              inputMardi = inputMardi+input;
 
            }
 
            if (jour == 'mercredi')
            {
              input = "<p><label id='c3"+classe+"'><input type='radio' name='jour3' value='"+value+"'id='"+classe+"' onchange='verification()'/><span>"+value+" "+nbPlace+" place restantes</span></label></p>";
              inputMercredi = inputMercredi+input;
 
            }
 
            if (jour == 'jeudi')
            {
              input = "<p><label id='c4"+classe+"'><input type='radio' name='jour4' value='"+value+"'id='"+classe+"' onchange='verification()'/><span>"+value+" "+nbPlace+" place restantes</span></label></p>";
              inputJeudi = inputJeudi+input;
 
            }
 
            if (i >= ligne){   // quand on à fini toutes les lignes alors seulement ici nous allons généré nore code HTML
              if (choixAnnee === "Terminale" || choixAnnee === "Premiere")
               {
                  document.querySelector('#jourLundi').innerHTML=inputLundi;
                  document.querySelector('#jourMardi').innerHTML=inputMardi;
                  document.querySelector('#jourMercredi').innerHTML=inputMercredi;
                  document.querySelector('#jourJeudi').innerHTML=inputJeudi;
                  inputLundi=""; // on remet les variable à zéros si jamais il y a erreur que l'utilisateur puisse recommencer
                  inputMardi="";
                  inputMercredi="";
                  inputJeudi="";
              }else if(choixAnnee !== "") {
 
                document.querySelector('#jourLundi').innerHTML=inputLundi;
                document.querySelector('#jourMardi').innerHTML=inputMardi;
                document.querySelector('#jourMercredi').innerHTML=inputMercredi;
                document.querySelector('#jourJeudi').innerHTML=inputJeudi;
 
              document.querySelector('#cbac').innerHTML="";   //après avoir générer ici je retire certain élèment de mon formulaire qui ne doive pas figuré pour les personnes ne remplissant pas les cnodidtions du dessus
              document.querySelector('#c2bac').innerHTML="";
              document.querySelector('#c3bac').innerHTML="";
              document.querySelector('#c4bac').innerHTML="";
 
 
                inputLundi="";
                inputMardi="";
                inputMercredi="";
                inputJeudi="";
 
              }else {
                console.log("erreur");
              }
 
 
          }//fin du if i = 49
 
       // fin du if du choix de l'année
    }//fin du if de l'ecole
    }
  }

Code html :

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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<html><head>
        <meta charset="utf-8">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
 
         <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <title>Titre</title>
    </head>
 
    <body cz-shortcut-listen="true">
 
          <script type="text/javascript">
          var tab = {"a1":["Danses \/Natation","12","sport","Champagne","lundi"],"a2":["Musculation \/ tennis","0","sport","Champagne","lundi"],"a3":["Sport Bac : Demi fond \/ Badminton","15","bac","Champagne","lundi"],"a4":["Th\u00e9atre","12","artistique","Champagne","lundi"],"a5":["Natation \/ Sports de Combats","12","sport","Champagne","mardi"],"a6":["Sports de Combats \/ Natation","12","sport","Champagne","mardi"],"a7":["Sport Bac: Demi fond \/ Tennis de table","15","bac","Champagne","mardi"],"a8":["Cin\u00e9ma","15","artistique","Champagne","mardi"],"a9":["Natation \/ Fitness","15","sport","Champagne","mercredi"],"a10":["Fitness \/ Natation","15","sport","Champagne","mercredi"],"a11":["Chant \/ Musique","12","artistique","Champagne","mercredi"],"a12":["Musique \/ Chant","12","artistique","Champagne","mercredi"],"a13":["Natation \/ Tennis","8","sport","Champagne","jeudi"],"a14":["Tennis \/ Natation","8","sport","Champagne","jeudi"],"a15":["Basket \/ Cross Fit","12","sport","Champagne","jeudi"],"a16":["Cross Fit \/ Basket","12","sport","Champagne","jeudi"],"a17":["Th\u00e9atre","12","artistique","Champagne","jeudi"],"a18":["Danses puis Sports de combat","15","sport","Aquitaine","lundi"],"a19":["Sports de combat puis Danses","15","sport","Aquitaine","lundi"],"a20":["Basket puis Musculation","12","sport","Aquitaine","lundi"],"a21":["Musculation puis Basket","12","sport","Aquitaine","lundi"],"a22":["Rugby","20","sport","Aquitaine","lundi"],"a23":["Sport Bac : Demi fond \/ Badminton","19","bac","Aquitaine","lundi"],"a24":["Th\u00e9\u00e2tre","20","artistique","Aquitaine","lundi"],"a25":["Musique puis Chant","18","artistique","Aquitaine","lundi"],"a26":["Chant puis Musique","18","artistique","Aquitaine","lundi"],"a27":["Sports de combat puis Musculation","15","sport","Aquitaine","mardi"],"a28":["Musculation puis Sports de combat","15","sport","Aquitaine","mardi"],"a29":["Basket puis Danses","12","sport","Aquitaine","mardi"],"a30":["Danses puis Basket","12","sport","Aquitaine","mardi"],"a31":["Foot","20","sport","Aquitaine","mardi"],"a32":["Sport Bac : Demi fond \/ Badminton","19","bac","Aquitaine","mardi"],"a33":["Th\u00e9\u00e2tre","20","artistique","Aquitaine","mardi"],"a34":["Sports de Combat Cross Fit","15","sport","Aquitaine","mercredi"],"a35":["Cross Fit puis Sports de combat","15","sport","Aquitaine","mercredi"],"a36":["Fitness puis Tennis","8","sport","Aquitaine","mercredi"],"a37":["Rugby","20","sport","Aquitaine","mercredi"],"a38":["Sport Bac : Demi fond \/ tennis de table","19","bac","Aquitaine","mercredi"],"a39":["Th\u00e9\u00e2tre","20","artistique","Aquitaine","mercredi"],"a40":["Musique puis Chant","18","artistique","Aquitaine","mercredi"],"a41":["Chant puis Musique","18","artistique","Aquitaine","mercredi"],"a42":["Yoga puis Sports de Combats","12","sport","Aquitaine","jeudi"],"a43":["Sports de Combat puis Yoga","12","sport","Aquitaine","jeudi"],"a44":["Basket puis Cross Fit","12","sport","Aquitaine","jeudi"],"a45":["Cross Fit puis Basket","12","sport","Aquitaine","jeudi"],"a46":["Foot","20","sport","Aquitaine","jeudi"],"a47":["Rugby","20","sport","Aquitaine","jeudi"],"a48":["Sport Bac : Demi fond \/ Tennis de table","19","bac","Aquitaine","jeudi"],"a49":["Th\u00e9atre","20","artistique","Aquitaine","jeudi"]};
          var ligne = 49;
          </script>
 
 
          <nav>
            <div class="nav-wrapper">
              <a href="#" class="brand-logo">Logo</a>
              <ul id="nav-mobile" class="right hide-on-med-and-down">
                <li><a href="sass.html">Sass</a></li>
                <li><a href="badges.html">Components</a></li>
                <li><a href="collapsible.html">JavaScript</a></li>
              </ul>
            </div>
          </nav>
<section>
  <div class="container">
    <div class="row ">
      <form class="col l12  z-depth-1 " method="post" action="modele/traitement.php" onsubmit="verification()">
 
 
        <p>
          </p><div class="input-field col l4">
     <label for="nom">Nom de l'élève</label>
     <input type="text" name="nom" id="nom" required="">
</div>
 
     <div class="input-field col l4">
     <label for="prenom">Prénom de l'élève</label>
     <input type="text" name="prenom" id="prenom" required="">
    </div>
  <div class="input-field col l4">
     <label for="date">Date de Naissance</label>
     <div class="modal datepicker-modal" id="modal-81ad660c-a298-b292-8a3f-8a0a9b3c6d47" tabindex="0"><div class="modal-content datepicker-container"><div class="datepicker-date-display"><span class="year-text"></span><span class="date-text"></span></div><div class="datepicker-calendar-container"><div class="datepicker-calendar"></div><div class="datepicker-footer"><button class="btn-flat datepicker-clear waves-effect" style="visibility: hidden;" type="button"></button><div class="confirmation-btns"><button class="btn-flat datepicker-cancel waves-effect" type="button">Cancel</button><button class="btn-flat datepicker-done waves-effect" type="button">Ok</button></div></div></div></div></div><input type="text" class="datepicker" name="date" id="date" required="">
</div>
 
<div class="input-field col l4">
     <label for="pNom">nom d'un parents</label>
     <input type="text" name="pNom" id="pNom" required="">
</div>
 
<div class="input-field col l4">
     <label for="pPrenom">Prénom d'un parents</label>
     <input type="text" name="pPrenom" id="pPrenom" required="">
</div>
 
<div class="input-field col l4">
     <label for="tel">Numéro de téléphone</label>
     <input type="text" name="tel" id="tel" required="">
</div>
<div class="input-field col l6">
     <label for="mail">email</label>
     <input type="text" name="mail" id="mail" required="">
</div>
 <p></p>
 
<div class="input-field col l3">
        <div id="ecoles">
           <label for="ecoles">Sélectionner votre écoles: </label><br>  <!-- champ du formulaire qui concerne le choix l'école -->
           <div class="select-wrapper"><input class="select-dropdown dropdown-trigger" type="text" readonly="true" data-target="select-options-8180fd8a-24bc-1632-c9d4-366cce141530"><ul id="select-options-8180fd8a-24bc-1632-c9d4-366cce141530" class="dropdown-content select-dropdown" tabindex="0"><li class="disabled selected" id="select-options-8180fd8a-24bc-1632-c9d4-366cce1415300" tabindex="0"><span>Votre écoles</span></li><li id="select-options-8180fd8a-24bc-1632-c9d4-366cce1415301" tabindex="0"><span>Aquitaine</span></li><li id="select-options-8180fd8a-24bc-1632-c9d4-366cce1415302" tabindex="0"><span>Champagne</span></li></ul><svg class="caret" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg><select name="ecoles" id="choixEcole" tabindex="-1">
               <option value="" disabled="" selected="">Votre écoles</option>
               <option value="Aquitaine">Aquitaine</option>
               <option value="Champagne">Champagne</option>
           </select></div>
        </div>
</div>
 
<div class="input-field col l3">
         <div id="annee">    <!-- champ du formulaire qui concerne le choix de l'annee -->
             <label for="annee">Sélectionner votre année: </label><br>
             <div class="select-wrapper"><input class="select-dropdown dropdown-trigger" type="text" readonly="true" data-target="select-options-95886e35-7c59-562c-e3fb-9b5136da39b2"><ul id="select-options-95886e35-7c59-562c-e3fb-9b5136da39b2" class="dropdown-content select-dropdown" tabindex="0"><li class="disabled selected" id="select-options-95886e35-7c59-562c-e3fb-9b5136da39b20" tabindex="0"><span>Votre année</span></li><li id="select-options-95886e35-7c59-562c-e3fb-9b5136da39b21" tabindex="0"><span>Seconde</span></li><li id="select-options-95886e35-7c59-562c-e3fb-9b5136da39b22" tabindex="0"><span>Premiere</span></li><li id="select-options-95886e35-7c59-562c-e3fb-9b5136da39b23" tabindex="0"><span>Terminale</span></li></ul><svg class="caret" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg><select name="annee" id="choixAnnee" tabindex="-1">
                <option value="" disabled="" selected="">Votre année</option>
                 <option value="Seconde">Seconde</option>
                 <option value="Premiere">Premiere</option>
                 <option value="Terminale">Terminale</option>
             </select></div>
         </div>
</div>
 
<div class="col l12 ">
 
  <h6>ête vous en filière informatique ?</h6>
    <p>
      <label>
        <input type="radio" name="section" value="Oui" class="test">
        <span>Oui</span>
      </label>
    </p>
    <p>
      <label>
        <input type="radio" name="section" value="Non" class="test">
        <span>Non</span>
      </label>
    </p>
 
</div>
 
 
<div class="col l12" id="jour">
 
 
        <div class="col l3" id="jourLundi">
 
        </div>
 
        <div class="col l3" id="jourMardi">
 
        </div>
 
 
        <div class="col l3" id="jourMercredi">
 
        </div>
 
 
        <div class="col l3" id="jourJeudi">
 
        </div>
</div>
 
<a class="waves-effect waves-light btn" onclick="choix()">voir les activités</a>
 
 
 
<!-- ILS DOIVENT CHOISIR obligatoirement activité par jour  -->
 
 
      </form>
    </div>
  </div>
</section>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
 
      <script src="../js/script.js"></script>
      <script src="../js/ini.js"></script>
 
 
</body></html>

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
 
voici le petit fichier ini.js  Obligatoire pour activé fonction du Framework css juste copier collé vous pouvez tester code :
 
const list = document.querySelectorAll('.sele')
 
//date de naiscance ini
 
 
const date = document.querySelector('.datepicker');
M.Datepicker.init(date,{});
 
 
 
 
//initialsaion des sélection form
 
 
const selection = document.querySelectorAll('select');
M.FormSelect.init(selection,{});
 
 
 
 
 
//dropdown activation
 
 
const dropdown = document.querySelector('.dropdown-trigger');
M.Dropdown.init(dropdown,{});
 
 
 
 
//tooltip
 
 
const tooltip = document.querySelectorAll('.tooltipped');
M.Tooltip.init(tooltip,{});

Alors voilà le principe c'est de générer un formulaire à partir de donné json génèrer par json_encode (d'un array php) jusque la pas de soucis,

quand je sélectionne Aquitaine en école et que je valide il me génère le code voulu sauf la première fois ou j'ai au dessus de chaque colonne le mot undifiened au dessus de chaque colonne des différentes div qui corresponde au jour de la semaine.

or si je sélection Champagne rien absolument rien si je rebouge un peut tous les paramètres des champs écoles, année , et le oui ou non sans rafraîchir la pâge après avoir fait une tentative de champagne si je sélectionne aquitaine que je modifie aussi les autres case je me retrouve avec les valeurs des deux activités des deux écoles ce cou ci enfin bref voilà le problème aucunne indication console et je vois pas du tout j'ai commenter mon code pour comprendre comment il fonctionne plus rapidement

Si des âmes charitables sont de passage je suis preneur

bm · 24/07/2018, 15h21

Quand tout est généré automatiquement, le débogage est impossible

https://silviomoreto.github.io/boots...lect/examples/

Générer un formulaire à partir de données json

JavaScript

Vue hybride

Discussions similaires

Partager

Partager