[AJAX] XMLHttpRequest avec select et objet Option
Bonjour à tous,
Après avoir lu quelques tutos et parcouru le forum, je me suis lancer dans une 1ere manip de XMLHttpRequest. Un select affiche les départements depuis la BDD. Si un département est sélectionné, un autre select affiche dynamiquement les villes de ce département.
La fonction JS :
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
|
function affiche_villes(f) {
var l1 = f.elements["dept"];
var l2 = f.elements["ville"];
var index = l1.selectedIndex;
if(index < 1)
l2.options.length = 0;
else {
var xhr_object = null;
if(window.XMLHttpRequest) // Firefox
else if(window.ActiveXObject) // Internet Explorer
xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
else { // XMLHttpRequest non supporté par le navigateur
alert("Votre navigateur ne supporte pas les scripts utilisés sur ce site. Merci d\'utiliser IE ou FF...");
return;
}
xhr_object.open("POST", "page.php", true);
xhr_object.onreadystatechange = function anonymous() {
if(xhr_object.readyState == 4)
eval(xhr_object.responseText);
}
xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
var data = "id_dept="+escape(l1.options[index].value)+"&form="+f.name+"&select=villes";
xhr_object.send(data);
}
} |
Côté formulaire / php
Code:
1
2
3
4
5
6
7
8
9
10
11
12
|
//le select des départements avec appel fonction affiche_villes
$sql = mysql_query("SELECT id, dept FROM depts ORDER BY id");
$ligne = "<select name='dept' id='dept' onchange='affiche_villes(this.form);'>";
$ligne .= "<option>Sélectionnez un département</option>";
while($row = mysql_fetch_assoc($sql)){
($_POST['dept'] == $row['id']) ? $select = "selected" : $select = "";
//la ligne ci-dessus récup le dept si le formulaire a été soumis
$ligne .= "<option value='".$row['id']."' ".$select.">".$row['dept']))."</option>";
}
$ligne .= "</select>";
echo $ligne; |
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
|
//le traitement du XMLHttpRequest après que le département ait été choisi
if(isset($_POST['id_dept'])){
$query = "SELECT id, nom, FROM villes WHERE id_dept = '".$_POST['id_dept'."' ORDER BY nom";
$result = @mysql_query($query);
//remplissage du select des villes avec objet Option
echo 'var s = document.forms["form1"].elements["villes"];';
echo 's.options.length = 0;';
echo 's.options[0] = new Option(\'Sélectionnez une ville\');';
while($r = mysql_fetch_assoc($result)){
echo 's.options[s.options.length] = new Option("'.$r["nom"].',"'.$r['id'].'");';
}
} |
Code:
1
2
3
4
5
|
//le select des villes auquel XMLHttpRequest s'applique
<select name="villes" id="villes">
<option value="0">Sélectionnez une ville</option>
</select> |
Et c'est magique ! on choisit un département, et, dans le select des villes, la liste s'affiche ! Super !
Mais alors ? pourquoi je poste ici ? Ben, parce que lorsque le formulaire est soumis et qu'un erreur de contrôle survient (un champ manquant, par exemple), j'arrive à ré afficher le département qui a été sélectionné, mais pas la ville ! J'ai lu que l'objet Option prenait selected et selectedIndex en paramètres, mais je ne parviens pas à les utiliser. Je ne sais pas si je dois à nouveau faire appel à la fonction JS affiche_villes et comment le faire...
Merci de vos lumières.
