Formulaire, zone déroulante et ajax

[cd090580]

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 :

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>

code de la fonction Javascript

Code :

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);
}

la fonction GetHXR s'occure d'instancier XMLHTTPREQUEST pour firefox ou IE.

Code du fichier php récupérant les données:

Code :

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);

Faut-il modifier autre chose pour que cela fonctionne sous les deux navigateurs ?

Firefox version 2.0.0.3
IE 7

Merci

[parksto]

si ça fonctionne sous internet explorer, c'est que le problème ne viens très certainement pas de php.

ton problème semble provenir de javascipt. par consequent tu ne poste pas dans la bonne section.

[Bourgui]

je sais pas pkoi ca marche sous ie ... :

Ton fichier .php envoi une reponse de ce style :

Code :

<select class="zonesaisie" name="locclient" id="locclient" onchange="LocToCp()">...[options]...</select>

et ca tu l'insere dans un select s'appelant "locclient" donc tu insere bien un select dans un autre select.

Soit tu vire le select dans ton fichier php qui genere la reponse.

Soit tu fait un peu plus propre en envoyant un chti fichier xml et en utilisant comme il faut la dom, qui te permet d ajouter et d'enlever des option plus joliement et facilement que avec innerHtml, mais c'est a toi de voir ...

[Giantrick]

Bonsoir,

J'ai développé un script similaire (pays, code postaux et localité) mais avec la bibiliothèque XAJAX pour PHP, plus simple et conviviale que du ajax pur (cela m'arrange je n'aime pas trop le javascript à développer bien que très pratique pour certaine fonctionnalité)

Pour ma part, je suis toujours au stade de développement et je tourne sous MAC et en local. Mais j'ai constaté que sous Safari mon script fonctionne et pas sous firefox (par contre je n'ai pas encore trouvé ma réponse.)

Je suis en train de bosser dessus donc patience peut être que cela pourra t'aider.

En attendant, je te propose d'aller voir le site de xajax si tu ne connais pas.

http://www.xajaxproject.org/

Aller à bientôt.