Formulaire dynamique relié a la base de donnée

**Phoeboe** · 23/02/2015, 16h34

Bonjour à tous, ceci est mon premier message sur le forum, je m’excuse d'avance si je ne respecte pas les règles du forum.

Alors voilà mon problème, dans le cadre d'un stage je dois réaliser un formulaire d'un type que je n'ai jamais eu l'occasion de voir (Je suis en deuxième année de DUT Informatique).

Le formulaire est sous forme d'un tableau, pré-rempli.

Afin de vous éclairer, voilà comment celui ci se présente :
Nom : illustration.png
Affichages : 291
Taille : 16,8 Ko

Nom : illustration.png
Affichages : 291
Taille : 16,8 Ko

Les colonnes Hotel, Déjeuner, Diner et Divers sont des listes déroulantes avec 3 choix que vous pouvez voir ci-dessus. Une fois le tableau remplit, lors de la soumission "submit" l'intégralité du tableau doit etre uploadé dans la base de donnée.
Le problème c'est que j'ai généré ce tableau de cette manière :

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
 <?php
 
                echo '<form  method="post" action="choixsubmit3.php?ded='.$numded.'" >';
                                          $fin = $ded->mission->dateFin; //donnera 1325199600
                                          $debut = $ded->mission->dateDebut;
                                          $nbjours= nbJours($debut,$fin).'jours';
                                          ?>
                </br>
                <table border >
                     <tr>
                         <td>Journ&eacute;e(s)</td>
                         <td>Hotel </td>
                         <td>D&eacute;jeuner </td>
                         <td> Diner</td>
                        <td>Divers </td>
                        <td> Date</td>
                         <td> Htl</td>
                         <td> Dej</td>
                         <td> Din</td>
                        <td> Div</td>
                         <td> TTL</td>
                        <td> Montant (en &euro;)</td>
                     </tr>
 
 
                    <?php
$dates=getDatesFromRange($debut,$fin);
foreach($dates as $date)
    {
  ?>
<tr>
 
                         <td><?php echo $date.'<br/>';// affiche chaque date avec un retour à la ligne?></td>
 
                         <td>
                          <SELECT name="hotel" id="hotel" size="1">
<OPTION>A payer
<OPTION>PEC
<OPTION>Rien a payer
 
</SELECT> 
                         </td>
                         <td>
 
                              <SELECT name="dej" id="dej" size="1">
<OPTION>A payer
<OPTION>PEC
<OPTION>Rien a payer
 
</SELECT> 
 
                         </td>
                         <td>
 
                          <SELECT name="diner" id="diner" size="1">
<OPTION>A payer
<OPTION>PEC
<OPTION>Rien a payer
 
</SELECT> 
 
                         </td>
                         <td>
 
                              <SELECT name="divers" id="divers" size="1">
<OPTION>A payer
<OPTION>PEC
<OPTION>Rien a payer
 
</SELECT> 
 
                         </td>
                        <td><?php echo $date.'<br/>';// affiche chaque date avec un retour à la ligne?> </td>
                         <td> </td>
                         <td> </td>
                         <td> </td>
                        <td> </td>
                         <td> </td>
                        <td> </td>
                     </tr>
 
<?php }
?>
 
                </table>
                 <input type="submit"  name = "create2" value="Ajouter un deplacement"/>
				</ul>
                </div>
    </html>

choixsubmit3.php est un fichier dans lequel j'upload les données dans la BDD en fonction du choix de l'utilisateur, actuellement celui-ci est incomplet pour ce formulaire.

Je n'arrive pas a trouver de solution, en effet j'ai réalisé deux autres formulaires plus simples qui marche parfaitement, je rentre les données des champs via input/submit mais un champs à la fois, ici l'algorithme créé autant de ligne que de dates, et je n'ai pas la possibilité d'uploader chaque cellule du tableau. Je suppose que je devrais utiliser un tableau et utilisé un indice que j’incrémente dans une boucle mais je me perd, je n'y arrive pas, cela fait plusieurs jours que je suis penché sur le problème.

Il n'y a pas de négociation possible le cahier des charges demande d'upload tout le tableau en une fois.

Je me tourne vers vous car je suis dans une entreprise qui n'a pas de personnel "développement" en effet ils confient habituellement ce genre de projet à d'autres entreprise qu'ils sous-traitent, personne ne peut donc m'aider.

Merci d'avance pour votre aide, n'hésiter pas à me demander plus d'informations pour comprendre totalement le programme.

Jonathan CONTE

**mathieu** · 25/02/2015, 22h24

montre nous le code html du tableau généré

Invité · 26/02/2015, 02h29

bonjour,
1/ pour pouvoir récupérer chaque ligne du tableau (<table>), il faut l'identifier.
Et chaque name doit être récupérable sous forme d'un tableau (array()).

Code html :

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

       <select name="hotel[]" size="1">

On récupèrera alors $_POST['hotel'], qui sera un array
2/ Il manque les value="..." aux options (et les balises fermantes) !
C'est cette valeur qui sera récupérée

Code html :

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

1
2
3
              <option value="Apayer">A payer</option>
              <option value="PEC">PEC</option>
              <option value="RienApayer">Rien a payer</option>

On peut forcer/controler les index (surtout si on a des checkbox, car seules les cases cochées sont récupérées) :

Code php :

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
<?php
$index = 0;
foreach($dates as $date)
{
?>
.....
       <select name="hotel[<?php echo $index; ?>]" size="1">
              <option value="Apayer">A payer</option>
              <option value="PEC">PEC</option>
              <option value="RienApayer">Rien a payer</option>
       </select>
.....
<?php
      $index++;
}
?>

N.B. J'ai supprimé id="hotel", car un id doit être UNIQUE.
Par contre, on peut mettre (si vraiment nécessaire) :

Code :

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

                          <select name="hotel[<?php echo $index; ?>]" id="hotel<?php echo $index; ?>" size="1">

N.B.bis Les balises HTML (<select ...><option ...>) s'écrivent traditionnellement en minuscules.
Contrairement aux requêtes SQL, où on écrira plutôt en majuscules : "SELECT ... FROM ... WHERE ...".

3/ La question qui se pose :
Quelle sera la structure de la table SQL pour enregistrer les données ?
C'est la PREMIERE chose à laquelle il faut réfléchir !

Car les enregistrer, c'est bien.
Pouvoir les ré-afficher, les modifier, les supprimer : c'est mieux.

**Phoeboe** · 04/03/2015, 16h15

Merci beaucoup ! Je viens seulement de voir vos réponses aujourd'hui, en attendant j'ai avancé et j'ai réussi à faire ce que je voulais.

Il y'a 3 tableaux dans le formulaire en question et j'ai encore des problèmes avec le javascript, je ne sais pas si je devrais créer un autre sujet, n'hésitez pas à me le dire si c'est le cas.

Je me lance, voici le code de mon premier tableau :

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
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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
 <form method="post" action="traitement.php" >
    <div id="champs" >
 
 
        <table id="tableau" border="1">
 
<thead>
		<tr>    
                    <th> Transport</th>
			<th>De</th>
			<th></th>
			<th></th>
			<th></th>
                        <th>A</th>
			<th></th>
			<th></th>
			<th></th>
		</tr>
	</thead>
	<tbody>
            <tr>    
                    <th>  </th>
			<th>Ville</th>
			<th>Pays</th>
			<th>Date</th>
			<th>Heure</th>
                        <th>Ville</th>
			<th>Pays</th>
			<th>Date</th>
			<th>Heure</th>
		</tr>
       <tr>
 
                    <td>
 
                        <div id="champselect"></div>
 
                    </td>
<td> <div id="champs1" ></div> </td>
<td><div id="champs2" ></div></td>
			<td><div id="champs3" ></div></td>
			<td><div id="champs4" ></div></td>
                        <td><div id="champs5" ></div></td>
                        <td><div id="champs6" ></div></td>
                        <td><div id="champs7" ></div></td>
                        <td><div id="champs8" ></div></td>
 
                </tr>
 
                <button type="button" onclick="addField()" >Ajouter une ligne</button>
<input type="hidden"  name="ded_id"  value="<?php $numded ?>">
    <input type="submit" />
      <?php
 
 
?>
    </tr>          
 
    </table>          
 
    <script type="text/javascript" >
         var divtab = document.getElementById('champselect'); 
        var div = document.getElementById('champs1'); 
        var div2 = document.getElementById('champs2');
        var div3 = document.getElementById('champs3');
         var div4 = document.getElementById('champs4');
          var div5 = document.getElementById('champs5');
           var div6 = document.getElementById('champs6');
            var div7 = document.getElementById('champs7');
             var div8 = document.getElementById('champs8');
 
        function addInput(name,taille){
 
            var input = document.createElement("input");
            input.name = name;
            input.size=taille;
           // input.size = 10;
 
            div.appendChild(input);
 
        }
         function addInput2(name,taille){
 
            var input = document.createElement("input");
            input.name = name;
            input.size=taille;
           // input.size = 10;
 
            div2.appendChild(input);
 
        }
        function addInput3(name,taille){
 
            var input = document.createElement("input");
            input.name = name;
            input.size=taille;
           // input.size = 10;
 
            div3.appendChild(input);
 
        }
        function addInput4(name,taille){
 
            var input = document.createElement("input");
            input.name = name;
            input.size=taille;
           // input.size = 10;
 
            div4.appendChild(input);
 
        }
        function addInput5(name,taille){
 
            var input = document.createElement("input");
            input.name = name;
            input.size=taille;
           // input.size = 10;
 
            div5.appendChild(input);
 
        }
        function addInput6(name,taille){
 
            var input = document.createElement("input");
            input.name = name;
            input.size=taille;
           // input.size = 10;
 
            div6.appendChild(input);
 
        }
        function addInput7(name,taille){
 
            var input = document.createElement("input");
            input.name = name;
            input.size=taille;
           // input.size = 10;
 
            div7.appendChild(input);
 
        }
 
        function addInput8(name,taille){
 
            var input = document.createElement("input");
            input.name = name;
            input.size=taille;
           // input.size = 10;
 
            div8.appendChild(input);
 
        }
 
        function addInputSelect(name,taille){
 
            var select = document.createElement("select");
            select.name = name;
            select.size=taille;
           // input.size = 10;
           var myOption1 = document.createElement("option");
            myOption1.text = "Avion";
            myOption1.value = "Avion";
 
            var myOption2 = document.createElement("option");
            myOption2.text = "Train";
            myOption2.value = "Train";
 
            var myOption3 = document.createElement("option");
            myOption3.text = "Vehicule personnel";
            myOption3.value = "Vehicule personnel";
 
            var myOption4 = document.createElement("option");
            myOption4.text = "Vehicule IAMM";
            myOption4.value = "Vehicule IAMM";
 
            var myOption5 = document.createElement("option");
            myOption5.text = "Bateau";
            myOption5.value = "Bateau";
 
        /* add the items to the list */
        select.appendChild(myOption1);
        select.appendChild(myOption2);
        select.appendChild(myOption3);
        select.appendChild(myOption4);
        select.appendChild(myOption5);
 
 
 
            divtab.appendChild(select);
        }
 
        function addField() {
 
            addInputSelect("transport[]",1);
            addInput("deVille[]",6);
            addInput2("dePays[]",6);
            addInput3("deDate[]",6);
            addInput4("deHeure[]",6);
            addInput5("aVille[]",6);
            addInput6("aPays[]",6);
            addInput7("aDate[]",6);
            addInput8("aHeure[]",6);
            divtab.appendChild(document.createElement("br"));
 
            div.appendChild(document.createElement("br"));
            div2.appendChild(document.createElement("br"));
             div3.appendChild(document.createElement("br"));
              div4.appendChild(document.createElement("br"));
               div5.appendChild(document.createElement("br"));
                div6.appendChild(document.createElement("br"));
                 div7.appendChild(document.createElement("br"));
                  div8.appendChild(document.createElement("br"));
 
 
 
        }
addField();
    </script>
      </div>
</form>

Ce code me permet d'ajouter dynamiquement des champs à mon tableau afin que l'utilisateur le remplisse (Hors sujet : Cela permet de faire un résumé des trajets effectués par l'employé pendant la mission pour le rembourser), le problème dans ce premier tableau c'est que je n'arrive pas à créer de fonction afin de supprimer une ligne, en effet je ne suis pas très familier avec le javascript, dans le cadre de ma formation j'ai majoritairement programmé en java.

Je ne vais pas vous parler de mon deuxième tableau, car celui-ci est semblable au troisième que je vous est déjà présenté, le code de celui-ci est le suivant :

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
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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
 
                <form method="post" action="traitement.php" >
    <div id="champs" >
 
 
        <table id="tableau" border="1">
 
<thead>
		<tr>    
                    <th> Journee(s) <button type="button" onclick="addFieldbis('<?= $nbjour ;?>')" >Auto</button></th>
			<th>Hotel</th>
			<th>Dejeuner</th>
			<th>Diner</th>
			<th>Divers</th>
                        <th>Date</th>
			<th>Htl</th>
			<th>Dej</th>
			<th>Din</th>
                        <th>Divr</th>
                        <th>TTL</th>
                        <th>Montant(en &euro;)</th>
		</tr>
	</thead>
	<tbody>
 
       <tr>
 
                    <td><div id="date">
                 <?php   $toto = $debut;
$dateN1 = date('Y-m-d', strtotime("$toto +$i day")); ?>
                     </div>
 
                    </td>
<td> <div id="champsHotel" ></div> </td>
<td><div id="champsDejeuner" ></div></td>
			<td><div id="champsDiner" ></div></td>
			<td><div id="champsDivers" ></div></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                          <td></td>
                        <td></td>
                        <td></td>
                </tr>
</table>          
                <button type="button" onclick="addField1()" >Ajouter une ligne</button>
<input type="hidden"  name="ded_id"  value="1">
    <input type="submit" />
      <?php
 
 
?>
    </tr>          
 
 
    </div>
    <script type="text/javascript" >
         var divhtl = document.getElementById('champsHotel'); 
        var divdej = document.getElementById('champsDejeuner'); 
        var divdin = document.getElementById('champsDiner');
        var divdiv = document.getElementById('champsDivers');
        var divdate = document.getElementById('date');
 
 
 
        function addInputSelectHtl(name,taille){
 
            var select = document.createElement("select");
            select.name = name;
            select.size=taille;
           // input.size = 10;
           var myOption1 = document.createElement("option");
            myOption1.text = "A payer";
            myOption1.value = "A Payer";
 
            var myOption2 = document.createElement("option");
            myOption2.text = "PEC";
            myOption2.value = "PEC";
 
            var myOption3 = document.createElement("option");
            myOption3.text = "Rien a payer";
            myOption3.value = "Rien a payer";
 
 
        /* add the items to the list */
        select.appendChild(myOption1);
        select.appendChild(myOption2);
        select.appendChild(myOption3);
 
 
 
 
            divhtl.appendChild(select);
        }
        function addInputSelectDej(name,taille){
 
            var select = document.createElement("select");
            select.name = name;
            select.size=taille;
           // input.size = 10;
           var myOption1 = document.createElement("option");
            myOption1.text = "A payer";
            myOption1.value = "A Payer";
 
            var myOption2 = document.createElement("option");
            myOption2.text = "PEC";
            myOption2.value = "PEC";
 
            var myOption3 = document.createElement("option");
            myOption3.text = "Rien a payer";
            myOption3.value = "Rien a payer";
 
 
        /* add the items to the list */
        select.appendChild(myOption1);
        select.appendChild(myOption2);
        select.appendChild(myOption3);
 
 
 
 
            divdej.appendChild(select);
        }
        function addInputSelectDin(name,taille){
 
            var select = document.createElement("select");
            select.name = name;
            select.size=taille;
           // input.size = 10;
           var myOption1 = document.createElement("option");
            myOption1.text = "A payer";
            myOption1.value = "A Payer";
 
            var myOption2 = document.createElement("option");
            myOption2.text = "PEC";
            myOption2.value = "PEC";
 
            var myOption3 = document.createElement("option");
            myOption3.text = "Rien a payer";
            myOption3.value = "Rien a payer";
 
 
        /* add the items to the list */
        select.appendChild(myOption1);
        select.appendChild(myOption2);
        select.appendChild(myOption3);
 
 
 
 
            divdin.appendChild(select);
        }
        function addInputSelectDiv(name,taille){
 
            var select = document.createElement("select");
            select.name = name;
            select.size=taille;
           // input.size = 10;
           var myOption1 = document.createElement("option");
            myOption1.text = "A payer";
            myOption1.value = "A Payer";
 
            var myOption2 = document.createElement("option");
            myOption2.text = "PEC";
            myOption2.value = "PEC";
 
            var myOption3 = document.createElement("option");
            myOption3.text = "Rien a payer";
            myOption3.value = "Rien a payer";
 
 
        /* add the items to the list */
        select.appendChild(myOption1);
        select.appendChild(myOption2);
        select.appendChild(myOption3);
 
 
 
 
            divdiv.appendChild(select);
        }
 
        function addText(name,contenu,taille){
 
            var objtxt = document.createTextNode(contenu);
         objtxt.size = taille;
         objtxt.name =name;
 
          divdate.appendChild(objtxt);
          divdate.appendChild(document.createElement("br"));
        }
        function addField1() {
 
 
 addText("date[]",tomorrow,10);
   tomorrow.setDate(tomorrow.getDate() + 1);
            addInputSelectHtl("Hotel[]",1);
            addInputSelectDej("Dejeuner[]",1);
            addInputSelectDin("Diner[]",1);
            addInputSelectDiv("Divers[]",1);
 
            divhtl.appendChild(document.createElement("br"));
 
            divdej.appendChild(document.createElement("br"));
            divdin.appendChild(document.createElement("br"));
            divdiv.appendChild(document.createElement("br"));
 
 
 
        }
         var date = '<?=$debut;?>';
var tomorrow = new Date(date);
var auto = 0;
        function addFieldbis(nbjour)  
        {
 
            //var date = '<?=$debut;?>';
          //  var tomorrow = new Date(date);
//tomorrow.setDate(tomorrow.getDate() + 1);
            if (auto == 0)
            {
                for(var i=0;i< nbjour;i++)
                    {   
 
                        addField1();
                        //alert(date);
                        // alert(tomorrow);
 
 
                    }
                    auto = 1;
                }
 
    }
 
 
 
 
addField1();
 
    </script>
 
</form>

Ce code me permet d'ajouter des champs de type "select" dans mon tableau, le bouton "auto" me permet de rajouter automatiquement un certain nombre de lignes (le nombre de jour entre la date de début et la date de fin), de cette façon l'utilisateur n'a plus qu'à modifier les champs "select".

Ici, j'ai plusieurs problèmes, le premier est que je n'arrive pas à "incrémenter" ma date de début dans le code javascript comme je le veux, je le faisais de cette manière en php :

Code :

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

1
2
3
4
5
6
 <?php 
 
                     $toto = $debut;
$dateN1 = date('Y-m-d', strtotime("$toto +$i day"));
 
                     echo "\n$dateN1\n" ; ?>

Ceci était bien entendu dans une boucle où $i s'incrémentait.

Du coup j'ai utilisé une méthode trouver sur internet mais qui ne me convient pas en effet la date affichée est du type : "Sun Dec 20 2012 01:00:00 GMT+0100 (Paris, Madrid)"

En ce qui concerne mon deuxième problème, je souhaiterais que, en fonction des champs remplit par l'utilisateur (via le select), les colonnes htl,dej,din,div,ttl et montant prennent des valeurs différentes.
Les colonnes htl,dej,din et div doivent prendre, respectivement, les valeurs 0.5,0.2,0.2 et 0.1 si leurs colonnes associées (Hotel, Déjeuner, Diner, Divers) sont égales à "A Payer" ou 0 sinon.
La colonne ttl sera égale à l'addition des précédentes (0 au minimum et 1 au maximum), le montant lui sera donc égale à ttl (qui est en fait un coefficient) multiplié par une valeur rentrée précédemment dans le formulaire.

J'ai pensé à l'ajout d'un bouton "calcul" qui appellerait une fonction javascript, mais je ne sais pas par où commençais je n'y arrive pas.
A noter que, dans l'idéal, il faudrait que cela se fasse automatiquement, sans devoir cliquer sur un bouton, rien que le fait de modifier les "select" devrait faire changer les valeurs, je ne sais pas si cela est possible en javascript simple (sans ajax).

Je me répète peut-être mais merci beaucoup pour vos réponses et pour l'attention que vous apportez à mes questions.

Invité · 04/03/2015, 20h37

Bonjour,
Je n'ai rien compris...

1/ Merci de poser une question à la fois, claire et précise.

2/ Quasiment plus de PHP dans ton code, mais du JavaScript.
Donc : pose la question dans le bon forum.

**Phoeboe** · 05/03/2015, 09h09

Ok merci du conseil, je me dirige vers le forum javascript, bonne journée !

Formulaire dynamique relié a la base de donnée

Langage PHP

Discussions similaires

Partager

Partager