Discussion :

[steph68b]

Hello ,

J'ai déjà jeté un oeil aux cours/tutos Ajax, mais des choses m'échappent encore.

J'aurais besoin de vous pour coder un cas concret mais très simple, qui m'aidera à mieux capter.
-> un formulaire
-> 2 input via <select>

<select>département (liste lue en base pour générer le select-option)

<select>ville (liste lue en base pour générer le select-option, selon le département saisi)

-> le but: n'afficher dans ville QUE celles du département choisi juste avant


.html

Code :

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

1
2
3
4
5
6
7
<form>
Département: 
<?php $tmp = select_départements("Département", true); echo $tmp; ?>

Ville:
<?php $tmp = select_villes("GrandeVille", $département_selectionné_juste_avant, true); echo $tmp; ?>
</form>

.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
    function select_départements($label, $flag_required=false)    
    {
 
        if($flag_required === true)    $required="required";
        else                                  $required="";
 
        $tmp = "<SELECT  ID ='$label' NAME='$label' onChange='returnDep()' $required>";
            $tmp .= "<OPTION VALUE=''>choisir";
 
            $query = "SELECT distinct(num_dep) FROM grandes_villes ORDER BY num_dep";
            $resultat = mysql_query($query);
            while ($ligne = mysql_fetch_array($resultat)) 
            {
                $tmp .= "<OPTION  VALUE='". mysql_real_escape_string($ligne['num_dep']) . "'>" . mysql_real_escape_string($ligne['num_dep']);
            }
        $tmp .= "</SELECT>\n\r";
 
        return $tmp;
    }
 
function select_villes($label, $dep, $flag_required=false)    
    {
 
        if($flag_required === true)    $required="required";
        else                                  $required="";
 
        $tmp = "<SELECT  NAME='$label' $required>";
            $tmp .= "<OPTION VALUE=''>choisir";
 
            $query = "SELECT id, ville FROM villes WHERE num_dep = '" . htmlspecialchars($dep, ENT_QUOTES, 'utf-8') . "' ORDER BY ville";
            $resultat = mysql_query($query);
            while ($ligne = mysql_fetch_array($resultat)) 
            {
                $tmp .= "<OPTION  VALUE='". mysql_real_escape_string($ligne['id']) . "'>" . mysql_real_escape_string($ligne['ville']);
            }
        $tmp .= "</SELECT>\n\r";
 
        return $tmp;

Avec un onChange sur le 1er select, je peux récupérer la valeur du département en JS, ok............ mais comme JS, lui, ne peut pas renvoyer de paramètre vers PHP (pour le select ville), la seule solution serait donc de l'Ajax, si j'ai bien compris?

Ou y-a-t-il une autre méthode?

Merci.

[steph68b]

J'avais bien pensé à construire le 2ème <select> dans la fonction JS du 1er......... ce qui est possible pour un <select> static........... MAIS pas en attaquant 1 BDD pour y chercher les data!!

J'en reviens donc au même point: AJAX!!

[NoSmoking]

Bonjour,

J'en reviens donc au même point: AJAX!!

rien de bien complexe au final, on peut te conseiller au moins

• Comprendre les mécanismes d'AJAX
• Allez plus loin avec AJAX et XMLHttpRequest

[steph68b]

Ok, vais (re)jeter un oeil, merci.

Mais si tu pouvais compléter mon code exemple, avec les 2 ou 3 instructions qui vont bien, ça participerait à ma compréhension.

EDIT:
Parce que le concept, ok, je vois... mais la structure "pratique" qui me pose problème (qui appelle quoi, et comment)... d'où mon exemple, certes basique, mais concret.

[steph68b]

Dis-moi si j'ai bon, en gros ça donnerait ça:

.html
-> inchangé

.php
-> seule la fonction select_départements() reste

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 select_départements($label, $flag_required=false)    
    {
 
        if($flag_required === true)    $required="required";
        else                                  $required="";
 
        $tmp = "<SELECT  ID ='$label' NAME='$label' onChange='returnDep()' $required>";
            $tmp .= "<OPTION VALUE=''>choisir";
 
            $query = "SELECT distinct(num_dep) FROM villes ORDER BY num_dep";
            $resultat = mysql_query($query);
            while ($ligne = mysql_fetch_array($resultat)) 
            {
                $tmp .= "<OPTION  VALUE='". mysql_real_escape_string($ligne['num_dep']) . "'>" . mysql_real_escape_string($ligne['num_dep']);
            }
        $tmp .= "</SELECT>\n\r";
 
        return $tmp;
    }

.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
function returnDep()
{
	//on récupère le département choisi...
	var myselect = document.getElementById("Departement");
        var dep = myselect.options[myselect.selectedIndex].value;
 
	//que l'on transmet à l'ajax de la ville
	maFonctionAjax(dep);
}
 
function maFonctionAjax(departement)
{
	var xhr;
	if (window.XMLHttpRequest)		{ xhr = new XMLHttpRequest(); }						// Mozilla, Safari, ...
	else if (window.ActiveXObject)	{ xhr = new ActiveXObject('Microsoft.XMLHTTP'); }	// IE
	else							{ alert("Votre navigateur n'est pas adapté pour faire des requêtes AJAX...");  xhr = false;	}
 
	xhr.open('GET',+'ajax_grandesVilles.php?a=' + encodeURIComponent(departement),true);
	xhr.onreadystatechange = function()
	{
 
			if (xhr.readyState === 4 && (xhr.status === 200 || xhr.status === 0))
			{
				createSelect(xhr.responseText;)
			}
	}
	xhr.send(null);
}
 
function createSelect(response)
{
	if (response.length)										//on ne traite QUE s'il y a des datas
	{
		var monSelect = document.getElementById("Ville");	
			theOption=document.createElement("OPTION");
			theText=document.createTextNode("choisir");
			theOption.appendChild(theText);
			monSelect.appendChild(theOption);
			theOption.setAttribute("value","");
 
		response = response.split('|', response);				// on extrait les data en tableau
 
		var nbElem = response.length;
		for (var i=0; i < nbElem; i++)						//que l'on traite pour chaque élément
		{									
			  theOption=document.createElement("OPTION");
			  theText=document.createTextNode(response[i]);
			  theOption.appendChild(theText);
			  monSelect.appendChild(theOption);
			  theOption.setAttribute("value", response[i]);
		}
 
	}
}

[NoSmoking]

Je t'engage à lire cette discussion Mise en place de listes liées^(*) et plus précisément la réponse en #58

^(*) Attention beaucoup de déchets !