Formulaire avec champ SELECT modifié dynamiquement.
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:
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:
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,
