Traitement réponses Php-SQL

**DkA59** · 26/11/2018, 16h16

Bonjour à tous,

J'ai besoin d'un petit coup de pouce voici mon code :

Avant tout ma page index.php :

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
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
245
246
247
248
249
250
251
252
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
 
        <title>Document sans titre</title>
 
<div style="visibility:hidden">
	  <?php 
        
        include('../Formulaire GEOCARTE/script.php');
        include('../Formulaire GEOCARTE/traitement2.php');
        
        ?>
</div>
		<script type="text/javascript" src="oXHR.js"></script>
        <script type="text/javascript">
                
        
                
 //----------------------       
        function hidedivonload() {
           
          document.getElementById('content').style.display = "none";
              // alert("La page est chargée");
        }
 //---------------------------       
        function listeville(id) {
          var e,i;
          var PID = "content"; // l'ID du div parent
          var p = document.getElementById(PID); // l'element parent
   
          // boucle sur chacun des childNodes de l'element parent
          for (i=0; i<p.childNodes.length; i++) {
     
            e = p.childNodes[i];
      
            if (e.nodeType!=1) continue; // bypass au travers des nodes non concernés 
            { 
            if (e.getAttribute("id") == id) {
              document.getElementById('content').style.display = "block";
                e.style.display = "block";
            }
            else {
              e.style.display = "none";
            }
           }
          }
          }
          
 //------------------------------      
         function test()
         {
        // alert(document.getElementById("listage").value);
         }
//-------------------------         
          function recupval() 
         {
         alert(document.getElementById("liste").value)
         } 
//----------------------------
 
                function actualiserblocpop()
                {
                        var comchoix = document.getElementById("liste").value;
                        blocpopu.innerHTML = comchoix;
                        blocsurf.innerHTML = comchoix;
                        blocpoints.innerHTML = comchoix;
                        blocconso.innerHTML = comchoix;
                }
//------------------------
                function requete()
                {
                        var userchoice = document.getElementById("liste").value;
                        alert(userchoice);
                        var xhr = getXMLHttpRequest();
                        var url = 'traitement2.php?blocpopu2='+userchoice;
                        alert (url);
                        xhr.open("POST",url , true);
                        alert (("blocpopu2=" + userchoice));
                        xhr.send("blocpopu2=" + userchoice);
                
                }
 
 
 
  
        </script>
 
 <style>           #table1 {
color:black;
background-color:white;
background-position: 20% center ;
background-image:url(logo2.png);
background-repeat:no-repeat;
 
margin: 0px;
}
        </style>
        </head>
 
        <body onload="hidedivonload()">
 
		<FORM method="POST" name="ajax" action="">
        <INPUT type="BUTTON" value="Submit"  ONCLICK="requete()">
 
 
        <table id="table1" width="1200" border="1">
        <TR><td><B>Choix de l'Agence : </B><select name="listagence" id="listage">
        <option value="0" selected="selected">Choisissez</option>
        <option value="carte1" onclick="listeville('div_carte1');test();">carte1</option>
        <option value="carte2" onclick="listeville('div_carte2); test();">carte2</option>
        <option value="carte3" onclick="listeville('div_carte3');test();">carte3</option>
        <option value="carte4"  onclick="listeville('div_carte4');test();"  >carte4</option>
        <option value="carte5" onclick="listeville('div_carte5');test();">carte5</option>
        <option value="carte6" onclick="listeville('div_carte6'); test();">carte6</option>
        </select>
 
        </td>
 
        </TR>
          <tr>
            <td width="1080">&nbsp;CARTE</td>
            <td width="320" >&nbsp;FORMULAIRE DE RECHERCHE</td>
          </tr>
          <tr>
            <td align="center" valign="middle">&nbsp;
            <div id="1" class="1">
        <div id="content" >
 
         <div id="div_0" >
                <img src="logo2.png" width="100%" height="300" /> </div>
 
            <div id="div_carte1" >
                      <iframe width="100%" height="800" frameBorder="0" allowfullscreen src="https://umap.openstreetmap.fr/fr/map/carte1></iframe>
            </div>
            
            <div id="div_carte2" >
        <iframe width="100%" height="300px" frameBorder="0" allowfullscreen src="https://umap.openstreetmap.fr/fr/map/carte2></iframe>
            </div>
 
            <div id="div_carte3" >
                         <iframe width="100%" height="300px" frameBorder="0" allowfullscreen src="https://umap.openstreetmap.fr/fr/map/carte3></iframe>
                  </div>
 
            <div id="div_carte4" >
            <iframe width="100%" height="300px" frameBorder="0" allowfullscreen src="https://umap.openstreetmap.fr/fr/map/carte4</iframe>
            </div>
            
            <div id="div_carte5" >
            <iframe width="100%" height="300px" frameBorder="0" allowfullscreen src="https://umap.openstreetmap.fr/fr/map/carte5></iframe>
            </div>
 
            <div id="div_carte6" >
            <iframe width="100%" height="300px" frameBorder="0" allowfullscreen src="https://umap.openstreetmap.fr/fr/map/acarte6></iframe>
            </div>
        </div>   
            </div>
            </td>
            <td>
 
            <table name:"2" width="200" border="1">
              <tr>
                <td>&nbsp;Cellule de Recherche par saisie
 
                </td>
              </tr>
              <tr>
                <td>&nbsp;Recherche par Commune :
 
                  <?php
          print $ld;
        ?>
 
 
                </td>
 
              </tr>
              <tr>                            
                <td>&nbsp; 
                <table>
                <tr>
                <td>Population : 
                </td>
                <td id="blocpopu">     value            
 
 
 
             </td>	
             <td>
                        Habitants
 
                        </td>
                        </tr>     
        <tr>
        <td>
            Surface du Département :		
            </td>
            <td id="blocsurf">
                 value  
                 </td>
                    <td>
                    Km²
                    </td>
                    </tr>
            <tr>
            <td>
                Nombre de Point :		
                </td>
                <td id="blocPoint">
              value
 
                </td>
                    <td>
                    Point
                    </td>
                    </tr>
              <tr>
              <td>
                Conso : 	
                </td>
                <td id="blocconso">
                value
                </td>
                    <td>
                        pts
                    </td>
                    </tr>
               <tr>
               <td>
                Parts de Marché : 		
                </td>
                <td>
                value
 
                 </td>
                    <td>
                            Pdm
                            </td>
                            </tr>
                </table>
                </td>
              </tr>
            </table></form>
 
 
        </td>
          </tr>
        </table></body>
        </html>

En résumé un premier menu dans une première DIV me permet de choisir une carte sous UMAP puis un second "devrait " me permettre d'afficher une liste déroulante dont le script fonctionnel que voici :

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
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<?php
// connexion à la base
$Host = "localhost";
$User = "root";
$Password = "root";
$Database = "data";
 
// connexion au serveur LocalHost
try {
    $bdd=new PDO("mysql:host=$Host; dbname=$Database;charset=utf8", $User, $Password);
}
catch(Exception $e){
    die('Erreur SGBDR : '.$e->getMessage());
}
 
 // Préparation de la requête ville
 $sql_ville = 'SELECT `VILLE`,`REF PCE` FROM `adr` GROUP BY `VILLE`';
$req = $bdd->query($sql_ville);
 
// Construction de la chaîne de caractères qui fait la // liste
 
	$ld = "<SELECT ID='liste' NAME='lstVille'>";
	$ld .= "<OPTION VALUE=0>Choisissez</OPTION>";
 
// On boucle sur la table
while($data= $req->fetch()){
		$ville = $data["VILLE"];
		$ld .="<option value=$ville"." onclick="."recupval('$ville');actualiserblocpop(); requete();".">$ville</option>";
}   
	$ld .= "</SELECT>";
	// Fermeture de la connexion
	$req->closeCursor();
?>

Jusque la tout se passe bien. une fois réalisé ce menu déroulant je récupère bien la valeur selectionné dans cette liste cependant ce script-ci ne semble pas s'exécuter... ayant passé beaucoup de temps dessus j'hésite car j'ai du omettre ou me tromper quelque part

Traitement2.php

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
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<?php
// connexion à la base
$Host = "localhost";
$User = "root";
$Password = "root";
$Database = "data";
 
 
// on récupère le nom de la commune choisie
 
$com = isset($_POST['blocpopu2']) ? $_POST['blocpopu2'] : false;
// Si on a une commune on procède à la requete 
if (false !== $com)
{
	//echo "ici : " . $_POST['blocpopu2']; >>>>ne fonctionne pas
	//echo $com;  >>>>>> ne fonctionne pas
 
// connexion au serveur LocalHost
try {
    $bdd=new PDO("mysql:host=$Host; dbname=$Database;charset=utf8", $User, $Password);
}
catch(Exception $e){
    die('Erreur SGBDR : '.$e->getMessage());
}
 
	 // Préparation de la requête Surface et Population
 $sql_pop = 'SELECT `POPULATION` FROM `comgeopopkm` WHERE `VILLE`="'. $_POST['blocpopu2'] .'"';
$req2 = $bdd->query($sql_pop);
$data2 = $req2->fetch();
	$population = $data2["POPULATION"];
        echo  . $population '<br />';
 
 
}
 
	// Fermeture de la connexion
	$req2->closeCursor();
?>

J'ai fait énormémentde modif sans comprendre mon erreur...
En bref.... je nage.... et j'ai un niveau XXX débutant.... si une bonne âme a un peu de son temps

Merci D'avance.

**NoSmoking** · 27/11/2018, 10h21

Bonjour,
tout d'abord il y a énormément de chose à dire sur ton code HTML, élément placés hors de la balise <body>, chaine non fermée et j'en passe.

Il y a également des maladresses dans ton code HTML-JS, prenons par exemple

Code :

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

1
2
3
4
5
6
7
8
9
<select name="listagence" id="listage">
  <option value="0" selected="selected">Choisissez</option>
  <option value="carte1" onclick="listeville('div_carte1');test();">carte1</option>
  <option value="carte2" onclick="listeville('div_carte2); test();">carte2</option>
  <option value="carte3" onclick="listeville('div_carte3');test();">carte3</option>
  <option value="carte4"  onclick="listeville('div_carte4');test();"  >carte4</option>
  <option value="carte5" onclick="listeville('div_carte5');test();">carte5</option>
  <option value="carte6" onclick="listeville('div_carte6'); test();">carte6</option>
</select>

associé à ta fonction listeville

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
function listeville(id) {
  var e, i;
  var PID = "content"; // l'ID du div parent
  var p = document.getElementById(PID); // l'element parent
  // boucle sur chacun des childNodes de l'element parent
  for (i = 0; i < p.childNodes.length; i++) {
    e = p.childNodes[i];
    if (e.nodeType != 1) continue; // bypass au travers des nodes non concernés 
    {
      if (e.getAttribute("id") == id) {
        document.getElementById('content').style.display = "block";
        e.style.display = "block";
      }
      else {
        e.style.display = "none";
      }
    }
  }
}

il serait plus « élégant » d'avoir cette approche

Code html :

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

1
2
3
4
5
6
7
8
9
<select name="listagence" id="listage" onchange="selectChange( this.value);">
  <option value="0" selected="selected">Choisissez</option>
  <option value="carte1">carte1</option>
  <option value="carte2">carte2</option>
  <option value="carte3">carte3</option>
  <option value="carte4">carte4</option>
  <option value="carte5">carte5</option>
  <option value="carte6">carte6</option>
</select>

avec une fonction selectChange comme suit

Code :

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

1
2
3
4
5
6
7
8
9
10
11
function selectChange(param) {
  var id = "div_" + param;
  var oContent = document.getElementById("content");
  var oElems = oContent.querySelectorAll("[id^='div_']");
  var i;
  var nb = oElems.length;
  console.log(oElems.length, id);
  for (i = 0; i < nb; i += 1) {
    oElems[i].style.display = oElems[i].id === id ? "block" : "none";
  }
}

Si l'on regarde ta fonction d'envoi, tu pourrais faire simplement

Code :

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

1
2
3
4
5
6
7
function requete() {
  var param = "blocpopu2=" + document.getElementById("listage").value;  // et NON liste
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "traitement2.php", true);
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  xhr.send(param);
}

Essaie déjà ces corrections et de rendre valide ton code HTML.

**DkA59** · 27/11/2018, 13h45

Merci pour ta réponse NoSmoking,

Merci pour la partie plus élégante, c'est effectivement beaucoup plus clair.

Cependant la partie liste déroulante agence est pleinement opérationnelle mon soucis est sur la partie "liste" et non "listeage" qui fonctionne, ce que je ne comprends pas c'est qu'il semble que le transfert xhr ne se fait pas, le script traitement2.php ne se lance pas du tout.

Du coup je viens de tester ta fonction requête, et malheureusement rien ne se passe même pas un simple echo dans le traitement2.php.

J'ai omis de préciser que je suis sous WAMP.... j'en viens à me demander si le soucis ne viens pas de la.

**NoSmoking** · 27/11/2018, 16h01

mon soucis est sur la partie "liste" et non "listeage"

je n'avais pas déchiffré le PHP, voilà pourquoi il vaut mieux toujours mettre le code HTML généré en non le code PHP.

Pour ce <select> je te conseil également d'adopter la version « élégante » par exemple

Code html :

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

1
2
3
4
5
6
7
8
<select id="liste" onchange="selectListeChange( this.value)">
  <option value="0">Choisissez</option>
  <option value="Bordeaux">Bordeaux</option>
  <option value="Grenoble">Grenoble</option>   
  <option value="Lyon">Lyon</option>  
  <option value="Marseille">Marseille</option>
  <option value="Paris">Paris</option>  
</select>

c'est le même principe que celui présenté précédemment et pour la fonction liée

Code :

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

1
2
3
4
5
6
7
8
9
function selectListeChange(param) {
  if( "0" !== param){
    // ici le code pour
    // mettre à jour les champs
 
    // lancement requête
    requete();
  }
}

en rétablissant « liste » dans la fonction requête

Code :

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

1
2
3
4
5
6
7
8
9
10
11
function requete(){
  var param = "blocpopu2=" + document.getElementById("liste").value;
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "traitement2.php");
  // pour voir le résultat
  xhr.onload = function(){
    console.log( "data : ",this.responseText);
  };  
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  xhr.send( param);
}

Du coup je viens de tester ta fonction requête, et malheureusement rien ne se passe même pas un simple echo dans le traitement2.php.

dans ton fichier traitement2.php mets un simple

Code php :

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

1
2
3
<?php
var_dump($_POST);
?>

et regarde ce que tu as en retour dans la console (F12).

**DkA59** · 27/11/2018, 21h59

Merci pour tes conseils j'ai finalement trouvé en repartant de 0 suite à tes conseils, je posterais mon code un peu plus tard.

En gros, une première erreur sur le submit sur le bouton au lieu du form, une balise form non fermé, et enfin le code PHP du traitement2 qui est en POST au lieu de GET.... tout simplement.

PS : j'ai repris ta fonction requete() bien meilleure.

Traitement réponses Php-SQL

AJAX

Discussions similaires

Partager

Partager