Discussion :

[Auresky]

Bonjour à tous,

Après vérification, il s'agit d'un soucis de javascript !
Pour le moment, la variable de ville me revient en undefined, pourtant ma fonction à l'air correct.

Qu'en pensez vous ?

Sur ma page de création de compte, je souhaite queles gens sélectionne leur pays, en fonction du pays, la liste des départements (ou districts) apparait dans un nouveau selecteur, enfin en fonction du département sélectionné, une liste de ville apparaisse.

J'ai beau tout essayer depuis plusieurs jours, je n'en vois pas la fin... Peut-être réussirez vous à m'aider ; )

Voici le code de ma page de création compte, qui se charge de base de cette manière:

Section concernée - création compte.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
<div>
    <p>Sélectionnez votre pays</p>
    <select name="pays" id="pays"  onchange="chargerListe('recup_departement.php','pays','departement')">
    <?php    $reponse = $gbdd->query('SELECT id_pays, nom_pays FROM pays ORDER BY nom_pays');?>
        <option  value="0">Choisir pays</option>
        <?php while($donnees = $reponse->fetch(PDO::FETCH_OBJ))
        { echo '<option  value="' . $donnees->id_pays . '">' . $donnees->nom_pays . '</option>'; }
?>
    </select>
</div>
 
<div>
    <p>Sélectionnez votre département</p>
    <span id="departement">
        <select name="departement">
            <option  value="0">Sélectionnez un pays</option>
        </select>
    </span>
</div>
 
<div>
    <p>Enfin, sélectionnez votre ville</p>
    <span id="ville">
        <select name="ville">
            <option  value="0">Sélectionnez un département</option>
        </select>
    </span>
</div>

Page recup_departement.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
<?php
if(isset($_POST['nom_liste']) && isset($_POST['val_sel']))
{
    $reponse = $bdd->prepare("SELECT id_departement, code, nom_departement FROM departement WHERE id_pays = :id_pays ORDER BY nom_departement");
    $reponse->execute(array('id_pays' => $_POST['val_sel']));
    $i = 0;
 
    echo "<select id='departement' name='".$_POST['nom_liste']."'  onchange=\"chargeListe('recup_ville.php','departement','ville')\">";
    while($donnees = $reponse->fetch(PDO::FETCH_OBJ))
    {
        echo "
        <option value='". $donnees->id_departement ."'>". $donnees->nom_departement . " (" . $donnees->code . ")</option>";
        $i++;
    }
    if($i==0)
    {
        echo "<option value='0'>S&eacute;lectionnez votre pays</option>";
    }
    echo '</select>';
}
 
 else
 {
        echo 'Parametres vides';
 }

La seconde page, concernant la récupération de la ville (fonction du pays sélectionné)

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
<?php
if(isset($_POST['noms_liste']) && isset($_POST['vals_select']))
{
    $req = $bdd->prepare("SELECT id_ville, nom, cp FROM maps_ville WHERE id_departement = :id_departement ORDER BY nom");
    $req->execute(array('id_departement' => $_POST['vals_select']));
    $i = 0;
 
    echo "<select id='listeville' name='".$_POST['noms_liste']."'>";
    while($result = $req->fetch(PDO::FETCH_OBJ))
    {
        echo "<option value='". $result->id_ville ."'>". $result->nom . " (" . $result->cp . ")</option>";
        $i++;
    }
    if($i==0)
    {
        echo "<option value='0'>S&eacute;lectionnez votre ville</option>";
    }
    echo '</select>';
}
 
 else
 {
        echo 'Parametres vides';
 }
 
?>

Enfin, voici la fonction onchange ; )

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
/* chargement liste dynamique */
 
function chargerListe(url,id_list1,id_list2)
{
    var xhr = new objXHR(true);
    var obj =document.getElementById(id_list1);
    xhr.addParam("val_sel", obj.value);
    xhr.addParam("nom_liste", id_list2);
    xhr.getObjConnexion().onreadystatechange = function()
{repChargerListe(xhr.getObjConnexion(),id_list2);}
    xhr.executerRequete(url);
}
 
function chargerListe2(url,id_list1,id_list2)
{
    var xhr = new objXHR(true);
    var list_dep =document.getElementById(id_list1);
 
 
    xhr.addParam("val_sel", list_dep.value);
    xhr.addParam("nom_liste", id_list2);
    xhr.getObjConnexion().onreadystatechange = function()
{repChargerListe(xhr.getObjConnexion(),id_list2);}
    xhr.executerRequete(url);
 
    var region =document.getElementById("region");
    region.value = list_dep.options[list_dep.options.selectedIndex].id;
}
 
/* chargement liste dynamique */
 
function chargeListe(url,id_list1,id_list2)
{
    var xhr = new objXHR(true);
    var obj =document.getElementById(id_list1);
    xhr.addParam("vals_select", obj.value);
    xhr.addParam("noms_liste", id_list2);
    xhr.getObjConnexion().onreadystatechange = function()
{repChargeListe(xhr.getObjConnexion(),id_list2);}
    xhr.executerRequete(url);
}
 
function chargeListe2(url,id_list1,id_list2)
{
    var xhr = new objXHR(true);
    var list_dep =document.getElementById(id_list1);
 
 
    xhr.addParam("vals_select", list_dep.value);
    xhr.addParam("noms_liste", id_list2);
    xhr.getObjConnexion().onreadystatechange = function()
{repChargeListe(xhr.getObjConnexion(),id_list2);}
    xhr.executerRequete(url);
 
    var region =document.getElementById("region");
    region.value = list_dep.options[list_dep.options.selectedIndex].id;
}
 
function repChargerListe(xhr,id_div)
{
    // Si toutes les donnees sont chagees
    if (xhr.readyState == 4)
    {
        // Et que tout c'est bien passe
        if (xhr.status == 200)
        {
            //charger les elements reçus dans la liste
            var affich_list=xhr.responseText;
            obj = document.getElementById(id_div);
            obj.innerHTML = affich_list;
        }
        else
        {
            alert('Un problème est survenu avec la requête.');
        }
    }
}
 
function repChargeListe(xhr,id_div)
{
    // Si toutes les donnees sont chagees
    if (xhr.readyState == 4)
    {
        // Et que tout c'est bien passe
        if (xhr.status == 200)
        {
            //charger les elements reçus dans la liste
            var affich_list=xhr.responseText;
            obj = document.getElementById(id_div);
            obj.innerHTML = affich_list;
        }
        else
        {
            alert('Un problème est survenu avec la requête.');
        }
    }
}

Merci de votre aide !

[Bovino]

C'est quoi new objXHR(true) ?

[Auresky]

Bonjour,

Merci de ton attention !

J'imagine que c'est une manière d'instancier un nouvel objet XHR.

Le fichier est un peu plus long, c'est une manière de le nettoyer, pour le réutiliser.

Pour le moment l'ensemble fonctionne, il me manque juste la $_POST['sel_pays'] de recup_ville.php, elle me reviens comme undefined dans la page de création compte.

A vrai le code n'est pas de moi, mais d'une connaissance qui à coder la partie d'un site pour moi.

[andry.aime]

Bonjour,

1- objXHR n'est pas une fonction standard, regarde ce tutoriel pour voir comment instancier un nouveau objet xmlHttpRequest.
2- Tu as des fonctions qui font les mêmes choses avec les mêmes nombres de paramètre. Inutile de les répéter avec des noms différents. Modifie seulement les valeurs des paramètres lors de ses appels.

A+.

[Auresky]

Bonsoir Andry.aime,

Il est possible que la fonction ne soit pas parfaite, n'ayant aucune connaissance de ce langage, c'est une connaissance qui me l'a codé, résultat, je suis bloqué pour ajouter une liste, et impossible de recontacter la personne en question.

Le tutoriel s'oriente t-il aux initiés ? car à première lecture, je suis plutôt..perdu lol

[andry.aime]

Le tutoriel s'oriente t-il aux initiés ?

Oui.

A+.