Bonjour,
J'ai fait la meme chose en php et en javascript, mais le résultat est un peu différent. Pourquoi?
Ce que je n'arrive pas à comprendre, c'est pourquoi les évènements "onchage" dans la page généré par PHP ne fonctionnent pas?
Voici la partie PHP
fichier index.php:
function OptionIniSelectGroupCodeCode:
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<div id="FormulaireCode"> <form id="FormCodeLibelle" action="php/code.php" methode="POST"> <table id="TableauCodeLibelle"> <thead id="theadCodeLibelle"> <tr> <td class="CodDate" colspan="2"><B>Date de bascule</B></td> <td><input id="DateBascule" name="DateBascule" value="" type="date"></td> </tr> <tr> <th class="col1">CA/CB</th> <th class="col2">A/R</th> <th class="col3">GroupCode/Périmètre</th> <th class="col4">Code</th> <th class="col5">Libelle</th> <th class="col6"></th> </tr> </thead> <tbody id="tbodyCodeLibelle"> <tr> <td class="col1"> <select id="CACB" class="StyleSelect" onchage="OnChangeCACB()" name="CACB[]"> <option selected="selected" value=""></option> <option value="CA">CA</option> <option value="CB">CB</option> </select> </td> <td class="col2"> <select id="AouR" class="StyleSelect" onchage="OnChangeAouR()" name="AouR[]"> <option selected="selected" value=""></option> <option value="A">Avances</option> <option value="R">Recettes</option> </select> </td> <td class="col3"> <select id="SelectGroupCode" class="StyleSelect" onchage="OnChangeGroupCode()" name="GroupeCode[]"> <option selected="selected" value=""></option> <?php foreach (OptionIniSelectGroupCode($OptSelectGrCode) as $cle => $valeur) { echo " <option name=\"" . $valeur . "\" value=\"" . $cle . "\">" . $valeur . "</option>\n"; } ?> </select> </td> <td class="col4"> <input onclick="ClickCode()" onpaste="PasteCode(event)" id="Code" name="Code[]" type="text"> </td> <td class="col5"> <input onclick="ClickCode()" onpaste="PasteCode(event)" id="Libelle" name="CodeLibelle[]" type="text"> </td> <td class="col6" align="center"> <button onclick="ajoutLigne()" name="Ajout" type="boutton" class="AjoutLigne">+</button> </td> </tr> </tbody> </table> <div id="DivBoutonValidateform" class="DivBoutonValidateform"> <button class="boutonValidateform" value="ok" name="Valider" type="submit">OK</button> </div> </form> </div>
Code:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20function OptionIniSelectGroupCode($OptSelectGrCode) { $user='toto'; $pass='titi'; $dsn='pgsql:host=10.0.0.1;dbname=dbname'; // nomdb global $db; $db = new PDO($dsn, $user, $pass); $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); $db->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC); $SqlQry= "select id_groupe_code, intitule_groupe_code from param.groupe_code ORDER BY intitule_groupe_code;"; $qry = $db->prepare($SqlQry); $qry->execute(); while ($row=$qry->fetch()) { $OptSelectGrCode[$row['id']]=$row['intitule']; } $qry->closeCursor(); return $OptSelectGrCode; }
Voici la meme chose en Javascript:
function OnloadStartCode:
2
Fonction CreationDerniereLigneCode:
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
106function OnloadStart() { // récupère une référence vers l'élément DivForm var DivForm = document.getElementById("FormulaireCode"); // crée un élément <form> et un élément <input> var form = document.createElement("form"); form.setAttribute("id", "FormCodeLibelle"); form.setAttribute("method", "POST"); form.setAttribute("action", "php/code.php"); // crée un élément <table> et des éléments <thead> et <tbody> var table = document.createElement("table"); table.setAttribute("id", "TableauCodeLibelle"); var tablethead = document.createElement("thead"); tablethead.setAttribute("id", "theadCodeLibelle"); var tablebody = document.createElement("tbody"); tablebody.setAttribute("id", "tbodyCodeLibelle"); // création de la ligne de l'entete du tableau <thead> // 1ère Ligne var row = document.createElement("tr"); var cell = document.createElement("td"); cell.setAttribute("colspan", "2"); cell.setAttribute("class", "ColDate"); var texte = document.createTextNode("Date de bascule"); cell.appendChild(texte); row.appendChild(cell); cell = document.createElement("td"); var input = document.createElement("input"); input.setAttribute("type", "date"); input.setAttribute("value", ""); input.setAttribute("name", "DateBascule"); input.setAttribute("id", "DateBascule"); cell.appendChild(input); row.appendChild(cell); tablethead.appendChild(row); row = document.createElement("tr"); // 1ère colonne cell = document.createElement("th"); cell.setAttribute("class", "col1"); texte = document.createTextNode("CA/CB"); cell.appendChild(texte); row.appendChild(cell); // 2ème colonne cell = document.createElement("th"); cell.setAttribute("class", "col2"); texte = document.createTextNode("A/R"); cell.appendChild(texte); row.appendChild(cell); // 3ème colonne cell = document.createElement("th"); cell.setAttribute("class", "col3"); texte = document.createTextNode("GroupCode/Périmètre"); cell.appendChild(texte); row.appendChild(cell); // 3ème colonne cell = document.createElement("th"); cell.setAttribute("class", "col4"); texte = document.createTextNode("Code"); cell.appendChild(texte); row.appendChild(cell); // 4ème colonne cell = document.createElement("th"); cell.setAttribute("class", "col5"); texte = document.createTextNode("Libelle"); cell.appendChild(texte); row.appendChild(cell); // 5ème colonne cell = document.createElement("th"); cell.setAttribute("class", "col6"); texte = document.createTextNode(""); cell.appendChild(texte); row.appendChild(cell); // ajoute la ligne à la fin du corps du tableau tablethead.appendChild(row); table.appendChild(tablethead); // Fonction de création de la dernière ligne du tableau, celle ou nous devons injecter les données. // nous passons ici seulement tablebody car nous en avons besoin pour le traitement dans la fonction CreationDerniereLigne(undefined, undefined, undefined, tablebody); // place <tbody> dans l'élément <table> table.appendChild(tablebody); // place <table> dans l'élément <form> form.appendChild(table); // ajoute <form> à l'élément <DIV id="formulaire"> DivForm.appendChild(form); div = document.createElement("div"); div.setAttribute("id", "DivBoutonValidateform"); div.setAttribute("class", "DivBoutonValidateform"); //Création du bouton de validation du formulaire var bouton = document.createElement("button"); bouton.setAttribute("type", "submit"); bouton.setAttribute("name", "Valider"); bouton.setAttribute("value", "ok"); bouton.setAttribute("class", "boutonValidateform"); texte = document.createTextNode("OK"); bouton.appendChild(texte); div.appendChild(bouton); form.appendChild(div); //cell.appendChild(texte); // place <bouton> dans l'élément <form> //form.appendChild(bouton); }
Code:
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
138function CreationDerniereLigne(CACBCell, AouRCell, GroupCodeCell, tablebody) { // Récupère l'élément tablebody si tablebody n'est pas definit et transmit lors de l'appel de la fonction // Pour récupérer tablebody, il faut qu'il existe déjà. if (typeof tablebody === 'undefined') { tablebody = document.getElementById("tbodyCodeLibelle"); } // Création de la dernière ligne var row = document.createElement("tr"); // Création de la 1ère colonne + définition des paramètres de la colonne cell = document.createElement("td"); cell.setAttribute("class", "col1"); // définit le select de la 1ère colonne du formulaire dans le tableau var select = document.createElement("select"); select.setAttribute("class", "StyleSelect"); select.setAttribute("name", "CACB[]"); select.setAttribute("id", "CACB"); var option; // Récupère l'élément CACB si CACB n'est pas definit et transmit lors de l'appel de la fonction. // Pour récupérer CACB, il faut qu'il existe déjà. // si non, CACB est cree. if (typeof CACBCell != 'undefined') { row.appendChild(CACBCell); } else { option = document.createElement("option"); option.setAttribute("value", ""); option.setAttribute("selected", "selected"); option.text = ""; select.appendChild(option); option = document.createElement("option"); option.setAttribute("value", "CA"); option.text = "CA"; select.appendChild(option); option = document.createElement("option"); option.setAttribute("value", "CB"); option.text = "CB"; select.appendChild(option); select.setAttribute("onchange", "OnChangeCACB()"); cell.appendChild(select); row.appendChild(cell); } // Récupère l'élément AouR si AouR n'est pas definit et transmit lors de l'appel de la fonction // Pour récupérer AouR, il faut qu'il existe déjà. // si non, AouR est cree. if (typeof AouRCell != 'undefined') { row.appendChild(AouRCell); } else { // Création de la 2ème colonne + définition des paramètres de la colonne cell = document.createElement("td"); cell.setAttribute("class", "col2"); // définit le select de la 2ème colonne du formulaire dans le tableau select = document.createElement("select"); select.setAttribute("class", "StyleSelect"); select.setAttribute("name", "AouR[]"); select.setAttribute("id", "AouR"); option = document.createElement("option"); option.setAttribute("value", ""); option.text = ""; option.setAttribute("selected", "selected"); select.appendChild(option); option = document.createElement("option"); option.setAttribute("value", "A"); option.text = "Avances"; select.appendChild(option); option = document.createElement("option"); option.setAttribute("value", "R"); option.text = "Recettes"; select.appendChild(option); select.setAttribute("onchange", "OnChangeAouR()"); cell.appendChild(select); row.appendChild(cell); } // Récupère l'élément GroupCode si GroupCode n'est pas definit et transmit lors de l'appel de la fonction // Pour récupérer GroupCode, il faut qu'il existe déjà. // si non, GroupCode est cree. if (typeof GroupCodeCell != 'undefined') { row.appendChild(GroupCodeCell); } else { // Création de la 3ème colonne + définition des paramètres de la colonne cell = document.createElement("td"); cell.setAttribute("class", "col3"); // définit le select de la 3ème colonne du formulaire dans le tableau select = document.createElement("select"); select.setAttribute("class", "StyleSelect"); select.setAttribute("name", "GroupeCode[]"); select.setAttribute("id", "SelectGroupCode"); option = document.createElement("option"); option.setAttribute("value", ""); option.setAttribute("selected", "selected"); option.text = ""; select.appendChild(option); AjaxSelectGroupCode("0", "0"); cell.appendChild(select); row.appendChild(cell); } // Création de la 4ème colonne + définition des paramètres de la colonne cell = document.createElement("td"); cell.setAttribute("class", "col4"); // définit l'input de la 4ème colonne du formulaire dans le tableau var input = document.createElement("input"); input.setAttribute("type", "text"); input.setAttribute("name", "Code[]"); input.setAttribute("id", "Code"); input.setAttribute("onpaste", "PasteCode(event)"); //input.setAttribute("onpaste", "var e=this; setTimeout(function(){ PasteCode(event) }, 200);"); input.setAttribute("onclick", "ClickCode()"); cell.appendChild(input); row.appendChild(cell); // Création de la 5ème colonne + définition des paramètres de la colonne cell = document.createElement("td"); cell.setAttribute("class", "col5"); // définit l'input de la 2ème colonne du formulaire dans le tableau input = document.createElement("input"); input.setAttribute("type", "text"); input.setAttribute("name", "CodeLibelle[]"); input.setAttribute("id", "Libelle"); input.setAttribute("onpaste", "PasteCode(event)"); //input.setAttribute("onpaste", "var e=this; setTimeout(function(){ PasteCode(event) }, 200);"); input.setAttribute("onclick", "ClickCode()"); cell.appendChild(input); row.appendChild(cell); // Création de la 6ème colonne + définition des paramètres de la colonne cell = document.createElement("td"); cell.setAttribute("class", "col6"); cell.setAttribute("align", "middle"); bouton = document.createElement("button"); bouton.setAttribute("class", "AjoutLigne"); bouton.setAttribute("type", "boutton"); bouton.setAttribute("name", "Ajout"); bouton.setAttribute("onclick", "ajoutLigne()"); texte = document.createTextNode("+"); bouton.appendChild(texte); // place <bouton> dans l'élément <td> cell.appendChild(bouton); // place les <td> dans l'élément <tr> row.appendChild(cell); // ajoute la ligne à la fin du corps du tableau tablebody.appendChild(row); }
