Discussion :

[zebulon36]

Bonjour

J'ai un formulaire avec une dizaine de champs, dont 2 me posent problème :

- Un champ INPUT dans lequel on saisit un Code localisation (code postal ou un code département)
- Un champ SELECT avec une liste de villes.

Un petit script (JQuery+Ajax) met à jour dynamiquement le contenu du champ SELECT en fonction des changements du champ INPUT.
Exemple : si on saisit 92 dans le champ INPUT, le champ SELECT est instantanément modifié pour contenir la liste des villes du département des 92/Hauts de Seine.

A la validation du formulaire (en php), lorsqu'il y a une erreur de saisi utilisateur sur l'un des 10 champs, je renvoie le formulaire entier avec les valeurs saisies pour chaque champ + les messages d'erreurs associés.
Problème : Je parviens à récupérer la valeur du champ INPUT précédemment saisi, mais impossible de récupérer celle du champ SELECT pour re-selectionner la ville choisie.
Exemple : pour le département 92, si l'utilisateur a sélecté la 10ieme ville de la liste ; alors dans le formulaire ressoumi pour correction, le champ SELECT pointe sur la 1iere ville de la liste et non pas la 10ieme !!

Comment faire pour que soit re-sélectée la ville choisie précédemment ?

HTML :

Code html :

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

1
2
3
4
5
6
7
<form enctype="multipart/form-data" action="" method="post">
    ...
    <input type="text" name="codeLocalisation" id="codeLocalisation" value="" />
    ...
    <select name="ville" id="ville"></select>
    ...
</form>

JAVASCRIPT

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
$(document).ready(function() {
    ...
    /* Mise à jour de la liste des villes lorsque code localisation est modifié */
    $('input#codeLocalisation').change(function() {
        majListeCommunes ();
    });
 
    /* Lors du chargement du formulaire, si la valeur du code localisation est non nulle, on charge la liste des communes associées */
    if($('input#codeLocalisation').val() != null) {
        majListeCommunes();
    };
})
 
/* [AJAX] Mise à jour de la liste des communes */
function majListeCommunes () {
    $('body').css('cursor', 'wait');
    var reponse = 
        $.ajax({
            type: 'POST',
            url: '/ajax/getvilles',
            data: {
                format: "json",
                codeLocalisation: $("input#codeLocalisation").val()
            },
            success: function(reponse) {
 
                reponse = eval(reponse);
                listeCommunes = reponse.contenu;
                var options = "";
                var optionSelection = "";
                if(listeCommunes != null) {
                    for( var i=0; i < listeCommunes.length; i++) {
                        options += '<option value="' + listeCommunes[i].ID + '">' + listeCommunes[i].NOM + '</options>';
                    };
                    $("select#ville").append(options);
                    /* On selectionne par défaut le premier élément de la liste si 
                       une ville n'est pas déjà sélectionnée */
                    if($("select#ville").val() == null) {
                        $("select#ville").val(listeCommunes[0].ID);
                    }
                };
            },
            complete: function(XMLHttpRequest, textStatus) {},
            dataType: "json",
            timeout: 4000,
        });
    $('body').css('cursor', 'default');
};

Je pense que ce m.... entre les lignes 36 et 40 du JS, mais je ne sais pas où.
(je précise que le reste marche : ajax, mise à jour de la liste sur changement du champ INPUT, .... etc)

Merci pour votre aide,

[SylvainPV]

Bonjour,

ligne 33-36 tu charges les options dans le select, donc il ne peut pas y avoir de sélection de la part de l'utilisateur une ligne en dessous. La condition ligne 39 sera donc toujours vraie, donc ça sélectionne le premier par défaut.

Tu pourrais renvoyer le formulaire HTML avec les messages d'erreur + le select avec déjà les options dont celle avec l'attribut selected ; ou si tu tiens à remplir le select en Javascript, passer l'index de sélection en Javascript d'une quelconque façon (variable lastSelected ou argument dans majListeCommunes) et ajouter l'attribut selected au bon index ligne 34

[zebulon36]

Bonjour SylvainPV

Merci pour cette réponse très rapide et qui m'éclaire un peu sur la cause du problème.

S'agissant de la solution : Je ne souhaite pas préparer les options du SELECT a l'avance dans le script PHP de validation du formulaire pour ne pas éparpiller mon code (...). Je souhaite donc que le JS remplisse les options du SELECT.

Je ne vois pas trop comment mettre en oeuvre la solution que tu préconises : comment notamment récupérer la valeur de l'index de sélection resoumi dans le formulaire à corriger ?

Merci pour ton aide,

[SylvainPV]

Eh bien je n'ai pas ton code sur la manière dont tu renvoies les sélections précédentes donc difficile de te guider.

Si tu soumets ton formulaire en AJAX, alors la solution est simple : tu gardes ta sélection en Javascript et tu la réutilises au callback success de ton appel, après la mise à jour de ta vue.

Si tu renvoies l'intégralité de ta page en PHP, là c'est plus ennuyeux car ça écrase tout le Javascript en mémoire dans la page précédente. Donc il faut renvoyer l'information dans la page générée en PHP. En moche et rapide, tu mets une balise script dans ta page où tu déclares une variable globale que tu réutilises ensuite dans ton JS ligne 34. En plus propre déjà, tu peux mettre un data-attribute selection sur ton élément HTML select, que tu viens récupérer en JS ensuite. Encore une autre solution, utiliser le localStorage.

Le mieux reste quand même de choisir quelque-chose d'uniforme. Si tu comptes sur le Javascript pour générer ta vue, alors mieux vaut soumettre le formulaire en AJAX (voire le valider et générer les messages d'erreur côté client). Si au contraire tu souhaites remplir ta page en PHP, mieux vaut générer tes <option> en PHP également.