Bonjour,
J'ai un formulaire d'inscription qui demande un code postal et une localité.
Dans ma base de données j'ai stocké tous les codes postaux et les localités.
Quand j'encode les chiffres du code postal, la zone déroulante avec la(les) commune(s) correspondante se met a jour.
Ex: je tape 5, la liste contient toutes les communes avec le code postal => 5000 à 5999; je tapes 51, j'ai toutes les communes de 5100 à 5199, etc
Cela fonctionne très bien sous internet explorer par contre sous firefox la liste ne se met pas à jour, la zone deroulante contient une autre zone déroulante.
ex:
sous IE:
sous Firefox:
Voici le code php:
Page avec le formulaire
code de la fonction 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 <!-- code pour localité --> <tr> <td align="right"><label>Localité</td> <td><input class="zonesaisie" type="text" name="cpclient" id="cpclient" size="5" value="'.$localite.'" onkeyup="CPToLoc()"/> <div id="locclient" style="display:inline"><select class="zonesaisie" name="locclient" id="locclient" onchange="LocToCp()">'; $sql = SQL_Query("select * from t_localite order by Localite"); while ($obj = SQL_Object($sql)) { echo '<option value="' .$obj->IdLocalite .'">'.$obj->Localite .'</option>'."\n"; } echo ' </select></div></td>
la fonction GetHXR s'occure d'instancier XMLHTTPREQUEST pour firefox ou IE.
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 function CPToLoc() { var choix = document.forms[0].elements['cpclient'].value; var xhr = getXhr() // On définit ce qu'on va faire quand on aura la réponse xhr.onreadystatechange = function() { // On ne fait quelque chose que si on a tout reçu et que le serveur est ok if(xhr.readyState == 4 && xhr.status == 200){ //alert(xhr.responseText); leselect = xhr.responseText; // On se sert de innerHTML pour rajouter les options a la liste //alert(leselect); document.getElementById('locclient').innerHTML = leselect; } } xhr.open("POST","includes/get_localites.php",true); xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); xhr.send("Loc=0&CodePostal="+choix); }
Code du fichier php récupérant les données:
Faut-il modifier autre chose pour que cela fonctionne sous les deux navigateurs ?
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 $connexion=SQL_Connexion(); echo '<select class="zonesaisie" name="locclient" id="locclient" onchange="LocToCp()">'; if (isset($_POST['CodePostal'])) { $cp = $_POST['CodePostal']; $sql = "select IdLocalite,CodePostal,Localite from t_localite where CodePostal like '$cp%' order by Localite"; $sql = SQL_Query($sql); while($req = SQL_Array($sql)) { echo '<option value="' .$req['IdLocalite'] .'">'.htmlentities($req['Localite']) .'</option>'."\n"; } } echo '</select>'; SQL_Disconnect($connexion);
Firefox version 2.0.0.3
IE 7
Merci
Partager