Différence php et javascript

**vandman** · 16/08/2016, 15h59

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:

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
<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>

function OptionIniSelectGroupCode

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
function 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:

Code :

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

1
2
<div id="FormulaireCode" onload="OnloadStart()">
		</div>

function OnloadStart

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
function 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);
	
}

Fonction CreationDerniereLigne

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
function 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);
}

**vandman** · 17/08/2016, 09h50

Bonjour,
J'ai trouvé, une faute d'orthographe toute bête...

onchange au lieux de onchage...

Désolé pour le dérangement.

Cordialement,
Vandman

Différence php et javascript

Langages serveur

Discussions similaires

Partager

Partager