Récupération de données envoyées au travers d'un $_POST

**illidan05** · 29/09/2014, 18h34

Bonjour à tous,

J'ai suivi le tutoriel suivant : http://ars69-techno.over-blog.com/20...dynamique.html à partir duquel j'ai fait 3 listes déroulantes liées.
Le système de listes liées fonctionne parfaitement et mes données sont bien récupérées sur ma BDD, par contre je n'arrive pas à récupérer les données sélectionnées sur ma 3ème liste déroulante au travers d'un "POST".

Le système de listes liées est composé de 5 fichiers :
- Le fichier "index.html" qui contient les 3 listes et un bouton d'envoi des données de la 3ème liste au fichier "consult.php"
- Le fichier "jquery-1.7.1.min.js" appelé dans le fichier "index.html"
- Le fichier "liste.js" appelé dans le fichier "index.html" qui correspond au script jquery des 3 listes liées
- Le fichier "liste.php" appelé dans le fichier "liste.js" pour interroger la BDD
- Le fichier "consult.php" qui récupère et affiche le POST envoyé par "index.html"

Mon problème doit venir d'une fonction manquante dans "liste.js" mais je ne maitrise pas javascript et si j'essai de récupérer la variable localite_trois dans "consult.php", j'ai un message d'erreur "variable non définie".

Code fichier index.html :

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
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="liste.js"></script>
 
<form action="consult.php" method="Post">
        <select id="localite_un">
        	<option value="">Sélectionner localité un</select>
        </select>
        <select id="localite_deux">
        	<option value="">Sélectionner localité deux</select>
        </select>
        <select id="localite_trois">
        	<option value="">Sélectionner localité trois</select>
        </select>
<input type="submit" value="Afficher la localité trois"/>
</form>

Code fichier liste.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
// JavaScript Document
$(document).ready(function() {
	var $localite_un = $('#localite_un');
	var $localite_deux = $('#localite_deux');
	var $localite_trois = $('#localite_trois');
 
	// chargement de la liste de localité un
	$.ajax({
		url: 'liste.php',
		data: 'go', // on envoie $_GET['go']
		dataType: 'json', // on veut un retour JSON
		success: function(json) {
			$.each(json, function(index, value) {
				// pour chaque noeud JSON
				// on ajoute l option dans la liste
				$('#localite_un').append('<option value="'+ index +'">'+ value +'</option>');
			});
		}
	});
 
	// à la sélection de la localité un dans la liste
	$localite_un.on('change', function() {
		var val = $(this).val(); // on récupère la valeur de la localité un
		if(val != '') {
			$localite_deux.empty(); // on vide la liste de localité deux
			$localite_deux.append('<option value="">Choisir la localité deux</option>');
 
			$.ajax({
				url: 'liste.php',
				data: 'localite_un='+ val, // on envoie $_GET['localite_un']
				dataType: 'json',
				success: function(json) {
					$.each(json, function(index, value) {
						$localite_deux.append('<option value="'+ index +'">'+ value +'</option>');
					});
				}
			});
		}
		else {
			$localite_deux.empty();
			$localite_deux.append('<option value="">Choisir la localité deux</option>');
			$localite_trois.empty(); // on vide la liste de localité deux
			$localite_trois.append('<option value="">Choisir la localité trois</option>');
		}
	});
 
	// à la sélection de la localité deux dans la liste
	$localite_deux.on('change', function() {
		var val = $(this).val(); // on récupère la valeur de la localité deux
		if(val != '') {
			$localite_trois.empty(); // on vide la liste de localité trois
			$localite_trois.append('<option value="">Choisir la localité trois</option>');
 
			$.ajax({
				url: 'liste.php',
				data: 'localite_deux='+ val, // on envoie $_GET['localite_deux']
				dataType: 'json',
				success: function(json) {
					$.each(json, function(index, value) {
						$localite_trois.append('<option value="'+ index +'">'+ value +'</option>');
					});
				}
			});
		}
		else {
			$localite_trois.empty();
			$localite_trois.append('<option value="">Choisir la localité trois</option>');
		}
	});
});

Code fichier liste.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
39
40
41
42
43
44
45
46
47
48
49
50
<?php
// Vérification des paramètres d'accès au fichier liste.php
if(isset($_GET['go']) || isset($_GET['localite_un']) || isset($_GET['localite_deux'])) {
	// connexion à la base de données
	try {
		$bdd = new PDO('mysql:host=localhost;dbname=localite', 'root', '');
	} catch(Exception $e) {
		exit('Impossible de se connecter à la base de données.');
	}
 
	$json = array();
 
	if(isset($_GET['go'])) {
		// requête qui récupère les localités un
		$requete = "SELECT * FROM localite_un ORDER BY localite_un ASC";
		// exécution de la requête
		$resultat = $bdd->query($requete) or die(print_r($bdd->errorInfo()));
		// Création de la liste
		while($donnees = $resultat->fetch(PDO::FETCH_ASSOC)) {
			// je remplis un tableau et mettant l'id en index
			$json[$donnees["id_localite_un"]][] = utf8_encode($donnees["localite_un"]);
		}
	}
	elseif(isset($_GET['localite_un'])) {
		// requête qui récupère les localités un
		$requete = "SELECT * FROM localite_deux WHERE id_localite_un = '".$_GET['localite_un']."' ORDER BY localite_deux ASC";
		// exécution de la requête
		$resultat = $bdd->query($requete) or die(print_r($bdd->errorInfo()));
		// Création de la liste
		while($donnees = $resultat->fetch(PDO::FETCH_ASSOC)) {
			// je remplis un tableau et mettant l'id en index
			$json[$donnees["id_localite_deux"]][] = utf8_encode($donnees["localite_deux"]);
		}
	}
	elseif(isset($_GET['localite_deux'])) {
		// requête qui récupère les localités un
		$requete = "SELECT * FROM localite_trois WHERE id_localite_deux = '".$_GET['localite_deux']."' ORDER BY localite_trois ASC";
		// exécution de la requête
		$resultat = $bdd->query($requete) or die(print_r($bdd->errorInfo()));
		// Création de la liste
		while($donnees = $resultat->fetch(PDO::FETCH_ASSOC)) {
			// je remplis un tableau et mettant l'id en index
			$json[$donnees["id_localite_trois"]][] = utf8_encode($donnees["localite_trois"]);
		}
	}
	 // envoi du résultat au success
	echo json_encode($json);
}
 
?>

Code fichier consult.php :

Code php :

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

1
2
3
4
<?php
$requete = $_POST["localite_trois"];
echo $requete;
?>

Merci d'avance pour votre aide
Bonne soirée

**danielhagnoul** · 29/09/2014, 23h39

Bonsoir

Suivant le lien que vous donnez, votre JSON devrait avoir la même structure que celle de mon exemple ci-dessous. Votre paramètre "json" est alors un "array" JS contenant des objets anonymes. Dans ce cas, votre exploitation du paramètre "json" est fausse, car votre paramètre "value" est un objet.

Voir les commentaires dans le code de ma page de test.

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
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0">
    <meta name="author" content="Daniel Hagnoul">
    <title>Forum jQuery</title>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/1.0.3/head.min.js"></script>
    <link rel="stylesheet" href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
    <script>
        "use strict";
 
        var debugBool = true;
 
         /*
          * J'utilise head.js pour charger CSS et JS de manière asynchrone 
          * et parallèle, mais les fichiers sont exécute dans l'ordre.
          * Voir la documentation et l'API : http://headjs.com/
          * Les polices de caractères et le fichier head.js doivent être 
          * inclus manuellement.
          */
        head.load(
            "http://danielhagnoul.developpez.com/styles/dvjhRemBase.css",
            "http://code.jquery.com/ui/1.11.0/themes/sunny/jquery-ui.css",
            "http://code.jquery.com/qunit/qunit-1.15.0.css",
            { "d3" : "http://d3js.org/d3.v3.min.js" },
            { "d3Hello" : "http://danielhagnoul.developpez.com/lib/dvjh/d3Hello.js" },
            { "jquery" : "http://code.jquery.com/jquery-2.1.1.min.js" },
            { "jqueryui" : "http://code.jquery.com/ui/1.11.0/jquery-ui.min.js" },
            { "datefr" : "http://danielhagnoul.developpez.com/lib/dvjh/datefr.js" },
            { "qunit" : "http://code.jquery.com/qunit/qunit-1.15.0.js" },
            { "testsQUnit" : "http://danielhagnoul.developpez.com/lib/dvjh/testsQUnit.js" }
        );      
    </script>
    <style>
        /* Nota bene : ici 1 rem est égal à 10 px, voir dvjhRemBase.css */
 
/*-- Début code du test --*/
 
 
/*-- Fin code du test --*/
 
    </style>
</head>
<body>
    <header>
        <h1>Forum jQuery</h1>
        <h2>
            <a href="">Lien</a>
        </h2>
    </header>
    <section class="conteneur">
        <nav>
 
<!-- Début code du test -->
 
 
 
<!-- Fin code du test -->
 
        </nav>
        <article>
 
<!-- Début code du test -->
 
<form id="localiteForm">
    <select id="localite_un" name="localite_un">
        <option value="">Sélectionner localité un</select>
    </select>
    <select id="localite_deux" name="localite_deux">
        <option value="">Sélectionner localité deux</select>
    </select>
    <select id="localite_trois" name="localite_trois">
        <option value="">Sélectionner localité trois</select>
    </select>
    <input type="submit" value="Go">
</form>
 
<!-- Fin code du test -->
 
        </article>
        <article class="qunit">
            <div id="qunit"></div>
            <div id="qunit-fixture"></div>
        </article>
    </section>
    <footer class="h-entry">
        <time class="dt-published" datetime="2014-01-22T10:36:43.443+0100">2014-01-22T10:36:43.443+0100</time>
        <a class="p-author h-card" href="http://www.developpez.net/forums/u285162/danielhagnoul/">Daniel Hagnoul</a>
        <a class="u-url" href="http://danielhagnoul.developpez.com/">Mon cahier d’exercices</a>
        <a class="u-url" href="http://javascript.developpez.com/faq/jquery/">FAQ</a>
        <a class="u-url" href="http://javascript.developpez.com/cours/?page=frameworks#jquery">Tutoriels</a>
    </footer>
    <script>
        "use strict";
        /*
         * Chargeur de code head.js, document ready et fichiers chargés.
         */
        head.ready( [ 
                "d3", "d3Hello", 
                "jquery", "jqueryui", "datefr",
                "qunit", "testsQUnit"
            ], function(){
 
/* Début code du test */
 
$( function(){ // forme abrégée de $(document).ready(function(){
 
    var localite_deux = [
            {
                "id_localite_deux" : 1,
                "id_localite_un" : 1,
                "localite_deux" : "ABIDJAN"
            },
            {
                "id_localite_deux" : 2,
                "id_localite_un" : 1,
                "localite_deux" : "DABOU"
            },
            {
                "id_localite_deux" : 3,
                "id_localite_un" : 1,
                "localite_deux" : "BINGERVILLE"
            },
            {
                "id_localite_deux" : 4,
                "id_localite_un" : 2,
                "localite_deux" : "ADZOPE"
            },
            {
                "id_localite_deux" : 5,
                "id_localite_un" : 2,
                "localite_deux" : "ALEPE"
            },
            {
                "id_localite_deux" : 6,
                "id_localite_un" : 2,
                "localite_deux" : "AGBOVILLE"
            },
            {
                "id_localite_deux" : 7,
                "id_localite_un" : 2,
                "localite_deux" : "TIASSALE"
            }
        ],
        localite_trois = [
            {
                "id_localite_trois" : 1,
                "id_localite_deux" : 1,
                "localite_trois" : "COCODY"
            },
            {
                "id_localite_trois" : 2,
                "id_localite_deux" : 1,
                "localite_trois" : "ADJAME"
            },
            {
                "id_localite_trois" : 3,
                "id_localite_deux" : 1,
                "localite_trois" : "PLATEAU"
            },
            {
                "id_localite_trois" : 4,
                "id_localite_deux" : 1,
                "localite_trois" : "YOPOUGON"
            },
            {
                "id_localite_trois" : 5,
                "id_localite_deux" : 2,
                "localite_trois" : "LOPOU"
            },
            {
                "id_localite_trois" : 6,
                "id_localite_deux" : 2,
                "localite_trois" : "CENTRE VILLE"
            },
            {
                "id_localite_trois" : 7,
                "id_localite_deux" : 3,
                "localite_trois" : "FAYA"
            },
            {
                "id_localite_trois" : 8,
                "id_localite_deux" : 3,
                "localite_trois" : "EMPT"
            },
            {
                "id_localite_trois" : 9,
                "id_localite_deux" : 4,
                "localite_trois" : "ANNEPE"
            },
            {
                "id_localite_trois" : 10,
                "id_localite_deux" : 4,
                "localite_trois" : "GRAND-AKOUDZIN"
            },
        ],
 
        localite_un = [
            {
                "id_localite_un" : 1,
                "localite_un" : "LAGUNES"
            },
            {
                "id_localite_un" : 2,
                "localite_un" : "AGNEBY-TIASSA-ME"
            },
        ],
        $localite_un = $( '#localite_un' ),
        $localite_deux = $( '#localite_deux' ),
        $localite_trois = $( '#localite_trois' ),
        loc2Init = function(){
            $localite_deux.empty();
            $localite_deux.append( '<option value="">Choisir la localité deux</option>' );
        },
        loc3Init = function(){
            $localite_trois.empty();
            $localite_trois.append( '<option value="">Choisir la localité trois</option>' );
        };
 
    /*
     * Je ne connais pas la structure de votre JSON, mais selon le lien 
     * que vous donnez, il devrait être conforme à 
     * JSON.stringify( localite_deux ). Ce qui donne : 
     */
 
    // debug, console, touche F12
    console.log( JSON.stringify( localite_deux ) );
 
    /*
     * [{"id_localite_deux":1,"id_localite_un":1,"localite_deux":"ABIDJAN"},
     * {"id_localite_deux":2,"id_localite_un":1,"localite_deux":"DABOU"},
     * {"id_localite_deux":3,"id_localite_un":1,"localite_deux":"BINGERVILLE"},
     * {"id_localite_deux":4,"id_localite_un":2,"localite_deux":"ADZOPE"},
     * {"id_localite_deux":5,"id_localite_un":2,"localite_deux":"ALEPE"},
     * {"id_localite_deux":6,"id_localite_un":2,"localite_deux":"AGBOVILLE"},
     * {"id_localite_deux":7,"id_localite_un":2,"localite_deux":"TIASSALE"}]
     */
 
    /*
     * Si c'est le cas, dans la méthode each, votre paramètre "json" est un 
     * array contenant des objets anonymes comme localite_un ci-dessus.
     * 
     * Dans ce cas, votre exploitation du paramètre "json" est fausse
     * car value est un objet.
     */
 
    $localite_un.on( 'change', function(){
        var val = $.trim( $( this ).val() );
 
        if ( val != '' ){
            loc2Init();
 
            $.each( localite_deux, function( i, item ){
                $localite_deux.append( '<option value="'+ item[ "id_localite_deux" ] +'">'+ item[ "localite_deux" ] +'</option>' );
            });
        } else {
            loc2Init();
            loc3Init();
        }
    });
 
    $localite_deux.on( 'change', function(){
        var val = $.trim( $( this ).val() );
 
        if ( val != '' ){
            loc3Init();
 
            $.each( localite_trois, function( i, item ){
                $localite_trois.append( '<option value="'+ item[ "id_localite_trois" ] +'">'+ item[ "localite_trois" ] +'</option>' );
            });
        } else {
            loc3Init();
        }
    });
 
    $( "#localiteForm" ).on( "submit", function(){
        // debug, console, touche F12
        // résultat, exemple : localite_un=2&localite_deux=2&localite_trois=6
        console.log( $( this ).serialize() );
 
        // bloque la soumission
        return false;
    });
 
    $.each( localite_un, function( i, item ){
        $localite_un.append( '<option value="'+ item[ "id_localite_un" ] +'">'+ item[ "localite_un" ] +'</option>' );
    });
 
    loc2Init();
    loc3Init();
 
});
 
/* Fin code du test */
 
            if ( debugBool ){
               console.log( ISOformat( new Date() ) );
 
                $( ".qunit" ).show();
 
                testQUnitSelector( "App", [ 
                    "#qunit", "#qunit-fixture", ".conteneur"
                ] );
 
                testQUnitID( "App", [ 
                    "qunit", "qunit-fixture"
                ] );
            }
 
        });
    </script>
</body>
</html>

**illidan05** · 30/09/2014, 21h43

Bonsoir,

Merci pour votre réponse, j'ai testé votre code et je vois bien les id des 3 localités dans la console.

Par contre, dans votre exemple, les variables sont directement définies dans le fichier alors que dans mon cas je les récupère dans le fichier "liste.php" au travers d'une base de donnée mysql.

Dans votre code, la variable est directement définie :

Code :

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

1
2
3
4
5
6
7
8
localite_un = [{
    "id_localite_un" : 1,
    "localite_un" : "LAGUNES"
},{
    "id_localite_un" : 2,
    "localite_un" : "AGNEBY-TIASSA-ME"
},],
$localite_un = $( '#localite_un' ),

Dans l'exemple que j'ai utilisé, je vois une référence à liste.php :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
var $localite_un = $('#localite_un');
$.ajax({
	url: 'liste.php',
	data: 'go', // on envoie $_GET['go']
	dataType: 'json', // on veut un retour JSON
	success: function(json) {
		$.each(json, function(index, value) {
			// pour chaque noeud JSON
			// on ajoute l option dans la liste
			$('#localite_un').append('<option value="'+ index +'">'+ value +'</option>');
		});
	}
});

N'ayant pas de connaissances en javascript, je ne sais pas comment appeler les valeurs transmises par "liste.php" dans votre exemple ni comment envoyer les données visibles dans la console vers une page php. Si vous en avez le temps, pouvez-vous m'indiquer quelles fonctions utiliser pour appeler les valeurs de mes listes depuis mon fichier "liste.PHP" puis transmettre ces données sur une autre page php ?

Merci pour votre aide.
Bonne soirée

**danielhagnoul** · 30/09/2014, 22h37

Bonsoir

Pour examiner la structure d'une liste dans la console (touche F12), faite simplement :

Code :

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

1
2
3
4
5
success: function( json ){
 
    console.log( json );
 
}

**illidan05** · 30/09/2014, 23h04

Voici les résultats que j'obtiens dans la console après sélection des deux premières listes, la troisième liste ne génère pas de code lors de la sélection d'un élément :

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
 
XHR finished loading: GET "http://localhost/liste.php?go". jquery-1.7.1.min.js:4
Object {1: Array[1], 2: Array[1]} liste.js:18
 
XHR finished loading: GET "http://localhost/liste.php?localite_un=1". jquery-1.7.1.min.js:4
Object {1: Array[1], 2: Array[1], 3: Array[1]} liste.js:38
 
XHR finished loading: GET "http://localhost/liste.php?localite_deux=2". jquery-1.7.1.min.js:4
Object {5: Array[1], 6: Array[1]}
5: Array[1]
     0: "LOPOU"
     length: 1
     __proto__: Array[0]
6: Array[1]
     0: "CENTRE VILLE"
     length: 1
     __proto__: Array[0]
__proto__: Object

Comme tu le disais, le code retourné indique "Object". A cause de ça je ne peux pas récupérer les valeurs des array 5 "Lopou" et 6 "centre ville" ?

**danielhagnoul** · 01/10/2014, 00h34

La structure de vos données est très différente de la mienne. On a donc :

Code :

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

1
2
3
4
5
// "http://localhost/liste.php?localite_deux=2"
var json = {
    5 : [ "LOPOU" ], // 5 est "id_localite_trois" chez moi
    6 : [ "CENTRE VILLE" ] // 6 est "id_localite_trois" chez moi
};

Mais je n'ai pas le détail des deux autres :

XHR finished loading: GET "http://localhost/liste.php?go". jquery-1.7.1.min.js:4
Object {1: Array[1], 2: Array[1]} liste.js:18

XHR finished loading: GET "http://localhost/liste.php?localite_un=1". jquery-1.7.1.min.js:4
Object {1: Array[1], 2: Array[1], 3: Array[1]} liste.js:38

**illidan05** · 01/10/2014, 07h45

Bonjour Daniel,

Voici le code généré au chargement de la page (liste.js:18) :

Nom : code_1.JPG
Affichages : 190
Taille : 25,0 Ko

Voici le code généré après avoir sélectionné une localité_un (liste.js:38) :

Nom : code_2.JPG
Affichages : 174
Taille : 27,4 Ko

Merci pour votre aide
Bonne journée

**danielhagnoul** · 01/10/2014, 09h49

Bonjour

Dans votre message n°1, fichier liste.js, il faut modifier trois lignes :

Code :

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

1
2
3
4
5
$('#localite_un').append('<option value="'+ index +'">'+ value[0] +'</option>');
 
$localite_deux.append('<option value="'+ index +'">'+ value[0] +'</option>');
 
$localite_trois.append('<option value="'+ index +'">'+ value[0] +'</option>');

Pour mon code exemple :

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
$( function(){ // forme abrégée de $(document).ready(function(){
 
    // liste.php
    var json = {
        1 : [ "LAGUNES" ],
        2 : [ "AGNEBY-TIASSA-ME" ]
    };
 
    // localite_un=1 // Choix : LAGUNES
    var json1 = {
        1 : [ "ABIDJAN" ], // "id_localite_deux" : [ "localite_deux" ]
        2 : [ "DABOU" ], // "id_localite_deux" : [ "localite_deux" ]
        3 : [ "BINGERVILLE" ] // "id_localite_deux" : [ "localite_deux" ]
    };
 
    // localite_deux=2" // Choix : DABOU
    var json2 = {
        5 : [ "LOPOU" ], // 5 est "id_localite_trois" chez moi
        6 : [ "CENTRE VILLE" ] // 6 est "id_localite_trois" chez moi
    };
 
    var $localite_un = $( '#localite_un' ),
        $localite_deux = $( '#localite_deux' ),
        $localite_trois = $( '#localite_trois' ),
        loc2Init = function(){
            $localite_deux.empty();
            $localite_deux.append( '<option value="">Choisir la localité deux</option>' );
        },
        loc3Init = function(){
            $localite_trois.empty();
            $localite_trois.append( '<option value="">Choisir la localité trois</option>' );
        };
 
    $localite_un.on( 'change', function(){
        var val = $.trim( $( this ).val() );
 
        if ( val != '' ){
            loc2Init();
 
            $.each( json1, function( i, item ){
                $localite_deux.append( '<option value="'+ i +'">'+ item[ 0 ] +'</option>' );
            });
        } else {
            loc2Init();
            loc3Init();
        }
    });
 
    $localite_deux.on( 'change', function(){
        var val = $.trim( $( this ).val() );
 
        if ( val != '' ){
            loc3Init();
 
            $.each( json2, function( i, item ){
                $localite_trois.append( '<option value="'+ i +'">'+ item[ 0 ] +'</option>' );
            });
        } else {
            loc3Init();
        }
    });
 
    $( "#localiteForm" ).on( "submit", function(){
        // debug, console, touche F12
        // résultat, exemple : localite_un=2&localite_deux=2&localite_trois=6
        console.log( $( this ).serialize() );
 
        // bloque la soumission
        return false;
    });
 
    $.each( json, function( i, item ){
        $localite_un.append( '<option value="'+ i +'">'+ item[ 0 ] +'</option>' );
    });
 
    loc2Init();
    loc3Init();
 
});

**illidan05** · 01/10/2014, 18h39

Bonsoir,

J'ai modifié les 3 lignes comme vous me l'avez indiqué mais je n'arrive toujours pas à récupérer les données de ma localite_trois. Apparemment la console retourne les mêmes paramètres.

Au chargement du fichier :

Nom : 1.JPG
Affichages : 190
Taille : 42,3 Ko

Nom : 1.JPG
Affichages : 190
Taille : 42,3 Ko

A la sélection de la liste localite_un :

Nom : 2.JPG
Affichages : 185
Taille : 27,2 Ko

A la sélection de la liste localite_deux :

Nom : 3.JPG
Affichages : 174
Taille : 31,2 Ko

Par contre, est-il possible de réaliser un échange vers un fichier PHP comme les listes "localite_un" et "localite_deux" font pour mettre à jour les listes déroulantes ? Je m'explique avec ce que je pense comprendre :

La valeur sélectionnée dans la liste localite_deux est récupérée et stockée dans une variable "val" :

Code javascript :

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

1
2
3
 
$localite_deux.on('change', function() {
       var val = $(this).val(); // on récupère la valeur de la localité deux

Puis cette valeur est envoyée à "liste.php" au travers de $_GET où le fichier PHP va interroger la BDD avec la valeur stockée dans la variable "val" et envoyer les valeurs de la localite_trois dans la 3ème liste :

Code javascript :

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

1
2
3
4
5
6
7
8
 
			$.ajax({
				url: 'liste.php',
				data: 'localite_deux='+ val, // on envoie $_GET['localite_deux']
				dataType: 'json',
				success: function(json) {
					$.each(json, function(index, value) {
						$localite_trois.append('<option value="'+ index +'">'+ value[0] +'</option>');

Ma question est donc, est-il possible de faire quelque chose d'équivalent avec la liste "localite_trois" qui ressemblerait à ce qui suit ? (Désolé mais je vais l'écrire avec mes mots car je ne sais pas comment faire).

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
	$localite_trois.on('change', function() {
		var val = $(this).val(); // on récupère la valeur de la localité trois
 
			$.ajax({
				url: 'autre_fichier.php',
				data: 'localite_trois='+ val, // on envoie $_GET['localite_trois']
				dataType: 'json',
				success: function(json) {
	//si j'appuis sur un bouton d'envoi, envoyer la valeur localite_trois au fichier autre_fichier.php
					});
				}
			});

Récupération de données envoyées au travers d'un $_POST

jQuery

Discussions similaires

Partager

Partager