Le code postal met à jour la liste des villes (Ajax/PHP)

**LadyArwen** · 21/01/2010, 16h05

Bonjour,

J'ai essayé de m'inspirer de ceci http://siddh.developpez.com/articles/ajax/ pour réaliser un liste déroulante qui se remplit en fonction du code postal saisi dans une zone de texte adjacente.

J'ai testé, le "Saisissez le code postal" est bien remplacé par "Choisissez la ville" sur le onchange(), mais la liste ne se remplit pas :

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<html>
	<head>
		<title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>
		<script type='text/javascript'>
 
			function getXhr(){
                                var xhr = null; 
				if(window.XMLHttpRequest) // Firefox et autres
				   xhr = new XMLHttpRequest(); 
				else if(window.ActiveXObject){ // Internet Explorer 
				   try {
			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
			            } catch (e) {
			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
			            }
				}
				else { // XMLHttpRequest non supporté par le navigateur 
				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
				   xhr = false; 
				} 
                                return xhr;
			}
 
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
			function go(){
				var xhr = getXhr();
				// On défini 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){
						leselect = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						document.getElementById('ville').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","v_inc/ajaxVilles.php",true);
				// ne pas oublier ça pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				// ici, l'id de l'auteur
				sel = document.getElementById('codePostal');
				//codePostal = sel.options[sel.selectedIndex].value;
				codePostal = document.forms.a.codePostal.value;				
				xhr.send("codePostal="+codePostal);
			}
		</script>
	</head>
	<body>
		<form name="a">
			<fieldset style="width: 500px">
				<legend>Liste liées</legend>
				<label>Code Postal</label>
				<input type="text" name='codePostal' id='codePostal' onchange='go()'/>
				<label>Ville</label>
				<div id='ville' style='display:inline'>
				<select name='ville'>
					<option value='-1'>Saisissez le code postal</option>
				</select>
				</div>
			</fieldset>
		</form>
	</body>
</html>

fichier ajaxVilles.php :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
        echo '<select name="ville">';
        if(isset($_POST["codePostal"])){
                /*mysql_connect("localhost","root","root");
                mysql_select_db("test");*/
                $res = mysql_query("SELECT * FROM sg_ville WHERE codePostal=".$_POST["codePostal"]." ORDER BY ville");
                echo '<option value="-1">Choisissez la ville</option>';
                while($row = mysql_fetch_assoc($res)){
                        echo '<option value="'.$row["idVille"].'">'.$row["ville"].'</option>';
                }
        }
        echo '</select>';
?>

Et le contenu de ma table :

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
--
-- Structure de la table `sg_ville`
--
 
CREATE TABLE IF NOT EXISTS `sg_ville` (
  `idVille` int(11) NOT NULL AUTO_INCREMENT,
  `pays` text NOT NULL,
  `codePostal` int(11) NOT NULL,
  `ville` text NOT NULL,
  PRIMARY KEY (`idVille`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=5 ;
 
--
-- Contenu de la table `sg_ville`
--
 
INSERT INTO `sg_ville` (`idVille`, `pays`, `codePostal`, `ville`) VALUES
(1, 'FR', 68440, 'BRUEBACH'),
(2, 'FR', 68440, 'HABSHEIM'),
(3, 'FR', 68000, 'COLMAR'),
(4, 'FR', 68040, 'INGERSHEIM');

J'ai annulé la connexion à la bbd car elle est déjà établie dans Joomla.
Pour l'instant je teste dans des pages php vierges le code sera intégré à mes formulaires chronoforms une fois fonctionnel.

**SpaceFrog** · 21/01/2010, 16h11

Attention !

name != id

ton select a un name
ton javascript attribue un innerHTML à un element avec getElementById()

rajoute un id à ton select

**E.Bzz** · 21/01/2010, 16h27

Bonjour,
en complément (pour IE !), il ne faut pas que l'id du div corresponde au name du select.
Donc quelque chose comme

Code :

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

1
2
	<div id='div_ville' style='display:inline'>
<select name='ville' id='ville'>

Ta fonction Ajax (pour le innerHTML) devra donc faire référence au div_ville ...

A+

**SpaceFrog** · 21/01/2010, 16h29

oui un id doit être unique sur la page ...

**LadyArwen** · 22/01/2010, 13h53

OK j'ai corrigé cela :

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<html>
	<head>
		<title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>
		<script type='text/javascript'>
 
			function getXhr(){
                                var xhr = null; 
				if(window.XMLHttpRequest) // Firefox et autres
				   xhr = new XMLHttpRequest(); 
				else if(window.ActiveXObject){ // Internet Explorer 
				   try {
			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
			            } catch (e) {
			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
			            }
				}
				else { // XMLHttpRequest non supporté par le navigateur 
				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
				   xhr = false; 
				} 
                                return xhr;
			}
 
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
			function go(){
				var xhr = getXhr();
				// On défini 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){
						leselect = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						document.getElementById('div_ville').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","v_inc/ajaxVilles.php",true);
				// ne pas oublier ça pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				// ici, l'id de l'auteur
				sel = document.getElementById('codePostal');
				//codePostal = sel.options[sel.selectedIndex].value;
				codePostal = document.forms.a.codePostal.value;				
				xhr.send("codePostal="+codePostal);
			}
		</script>
	</head>
	<body>
		<form name="a">
			<fieldset style="width: 500px">
				<legend>Liste liées</legend>
				<label>Code Postal</label>
				<input type="text" name="codePostal" id="codePostal" onchange="go()"/>
				<label>Ville</label>
				<div id="div_ville" style="display:inline">
				<select name="ville" id="ville">
					<option value="-1">Saisissez le code postal</option>
				</select>
				</div>
			</fieldset>
		</form>
	</body>
</html>

Mais j'ai toujours le même résultat...

**E.Bzz** · 22/01/2010, 13h56

Ton paramètre ne doit pas être passé correctement car tu mélanges 2 syntaxes

Code :

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

codePostal = document.forms.a.codePostal.value;

Utilise soit

Code :

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

codePostal = document.forms['a'].elements['codePostal'].value;

soit

Code :

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

codePostal = document.a.codePostal.value;

La 1° est à privilégier

(de loin !)

A+

**LadyArwen** · 22/01/2010, 15h13

Je l'ai corrigé (la n° 1) mais ça ne change rien...
C'est ça quand on essaye d'adapter !!

**E.Bzz** · 22/01/2010, 15h26

En fait (j'avais pas fait attention

) tu pouvais faire plus simple avec ton code existant, puisque tu avais déjà ciblé l'input avec getElementById() :

Code :

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

1
2
3
sel = document.getElementById('codePostal');
//codePostal = sel.options[sel.selectedIndex].value;
codePostal = sel.value;

Mais ça aurait dû fonctionner quand même

Du coup, il faudrait nous remontrer le code actuel.

A+

**E.Bzz** · 22/01/2010, 15h28

Arf !

C'est en me relisant que je vois le problème : il faut nommer ta variable autrement sinon elle correspond à l'id de l'input (pas glop

)

Appelle-là varCodePostal par exemple ...

A+

**LadyArwen** · 22/01/2010, 16h05

J'ai modifié en conséquence :

Code :

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

1
2
3
4
				sel = document.getElementById('codePostal');
				//codePostal = sel.options[sel.selectedIndex].value;
				varCodePostal = document.forms['a'].elements['codePostal'].value;			
				xhr.send("codePostal="+CodePostal);

Puis comme ça ne donnait toujours pas de résultat :

Code :

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

1
2
3
4
				sel = document.getElementById('codePostal');
				//codePostal = sel.options[sel.selectedIndex].value;
				varCodePostal = document.forms['a'].elements['codePostal'].value;			
				xhr.send("codePostal="+varCodePostal);

Et j'en suis toujours au même stade..
Donc dans le post suivant, le code de la page codepostal.php (la page ajaxVilles.php n'ayant pas été modifiée depuis le départ).

**LadyArwen** · 22/01/2010, 16h08

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<html>
	<head>
		<title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>
		<script type='text/javascript'>
 
			function getXhr(){
                                var xhr = null; 
				if(window.XMLHttpRequest) // Firefox et autres
				   xhr = new XMLHttpRequest(); 
				else if(window.ActiveXObject){ // Internet Explorer 
				   try {
			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
			            } catch (e) {
			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
			            }
				}
				else { // XMLHttpRequest non supporté par le navigateur 
				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
				   xhr = false; 
				} 
                                return xhr;
			}
 
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
			function go(){
				var xhr = getXhr();
				// On défini 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){
						leselect = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						document.getElementById('div_ville').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","v_inc/ajaxVilles.php",true);
				// ne pas oublier ça pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				// ici, l'id de l'auteur
				sel = document.getElementById('codePostal');
				//codePostal = sel.options[sel.selectedIndex].value;
				varCodePostal = document.forms['a'].elements['codePostal'].value;			
				xhr.send("codePostal="+varCodePostal);
			}
		</script>
	</head>
	<body>
		<form name="a">
			<fieldset style="width: 500px">
				<legend>Liste liées</legend>
				<label>Code Postal</label>
				<input type="text" name="codePostal" id="codePostal" onChange="go()"/>
				<label>Ville</label>
				<div id="div_ville" style="display:inline">
				<select name="ville" id="ville">
					<option value="-1">Saisissez le code postal</option>
				</select>
				</div>
			</fieldset>
		</form>
	</body>
</html>

**E.Bzz** · 22/01/2010, 16h17

Envoyé par LadyArwen

Et j'en suis toujours au même stade..

Lequel, au fait ?
Tu ne nous as pas dit ce que tu obtenais ?
Une erreur ?

Que te renvoie le responseText ?

A+

**SpaceFrog** · 22/01/2010, 16h20

attribues le responseText en innrHTML à ne balise <pre> ou fais en un alert pour voir ce qu'il y a dedans

**LadyArwen** · 22/01/2010, 16h27

Merci pour le tuyau,
j'ai testé le responseText sur ton conseil (c'est pas mon langage de prédilection le Javascript, je fais du devinage) et ça m'a permis de trouver la faille... un truc à la con comme d'hab !
Il fallait quand même se reconnecter à la bdd... Bizarre, pour tous mes autres forms j'ai pas eu besoin !
Donc a y est j'ai mes patelins, trop génial !!
Mille milliards de mercis pour votre aide, comme d'hab !

je vais maintenant pourvoir l'intégrer à mon chronoforms en espérant que ça marche toujours après !

**LadyArwen** · 22/01/2010, 16h29

ah merci spacefrog pour ta réponse qui est arrivée entre temps, j'ai fait un alert effectivement !
Quelques vieux souvenirs de mes cours d'y a 6 ans

**SpaceFrog** · 22/01/2010, 16h42

Oui je me disais bien que l'on avait déja du se croiser, c'était sur le forum js ou vb ?

**LadyArwen** · 25/01/2010, 09h22

J'enlève le résolu parce que j'aimerais aller plus loin.
Je souhaiterais que lorsqu'il n'y a pas de ville pour le code postal l'affichage change et que l'utilisateur ait la possibilité de saisir une ville manuellement (lorsque c'est une adresse en Suisse par exemple, ce qui arrive de temps en temps). Je ne vais pas m'amuser à intégrer la liste de toutes les localités du monde dans notre base de données !

Donc en résumé ce que j'aimerais obtenir :
[texte: saisie code postal] --on change()--> 2 cas de figure avec 2 affichages :
1) code postal répertorié dans la base --> [liste déroulante : avec les villes]
2) code postal non répertoiré --> message ["Code postal non répertoiré, vérifiez votre saisie ou saisissez la ville ci-dessous, si étranger"] --> [zone de texte : saisie de la ville]

J'ai essayé de modifier le fichier ajaxVilles en rajoutant un test :

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
<?php
if(isset($_POST["codePostal"])){
mysql_connect("localhost","root","");
mysql_select_db("joserfages");
$res = mysql_query("SELECT * FROM sg_ville WHERE codePostal=".$_POST["codePostal"]." ORDER BY ville");
	if (mysql_num_rows($res)>0) {
		echo '<select name="ville">';
		echo '<option value="-1">Choisissez la ville</option>';
		while($row = mysql_fetch_assoc($res)) {
		echo '<option value="'.$row["idVille"].'">'.$row["ville"].'</option>';
		}
	echo '</select>';
	}
	else {
		//echo 'le code postal n\'est pas répertoiré...';		
		echo '<input type="text" name="ville" id="txtVille"/>';
	}
}
 
?>

Bien évidemment ça n'a pas fonctionné, j'en ai déduit que le champ texte en question devrait peut-être exister dans le formulaire de la page codePostal.php ?

En fait je n'ai pas trop compris comment cette partie-là (en vert) :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
		<form name="a">
			<fieldset style="width: 500px">
				<legend>Liste liées</legend>
				<label>Code Postal</label>
				<input type="text" name="codePostal" id="codePostal" onChange="go()"/>
				<label>Ville</label>
				<div id="div_ville" style="display:inline">
				<select name="ville" id="ville">
					<option value="-1">Saisissez le code postal</option>
				</select>				</div>
			</fieldset>
		</form>

Pouvait être remplacée par celle-ci (j'ai pas saisi la logique d'AJAX je crois bien) :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
	echo '<select name="ville">';
	if(isset($_POST["codePostal"])){
		mysql_connect("localhost","root","");
		mysql_select_db("joserfages");
		$res = mysql_query("SELECT * FROM sg_ville WHERE codePostal=".$_POST["codePostal"]." ORDER BY ville");
		echo '<option value="-1">Choisissez la ville</option>';
		while($row = mysql_fetch_assoc($res)){
			echo '<option value="'.$row["idVille"].'">'.$row["ville"].'</option>';
		}
	}
	echo '</select>';

**LadyArwen** · 25/01/2010, 09h24

Envoyé par SpaceFrog

Oui je me disais bien que l'on avait déja du se croiser, c'était sur le forum js ou vb ?

Peut-être bien les deux, je faisais un peu de VB vers 2000-2002 pour un stage.

**LadyArwen** · 25/01/2010, 09h45

Je me documente et je crois comprendre que cette ligne (et plus particulièrement responseText) affecte le résultat du traitement effectué dans ajaxVilles au div div_ville :

Code :

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

1
2
leselect = xhr.responseText;
document.getElementById('div_ville').innerHTML = leselect;

Si c'est bien ça je DEVRAIS pouvoir remplacer le select par un champ text...

Eh bien non pas moyen, la seule chose que j'arrive à faire c'est changer la valeur d'un élement qui existe déjà dans le formulaire d'origine :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<form name="a">
			<fieldset style="width: 500px">
				<legend>Liste liées</legend>
				<label>Code Postal</label>
				<input type="text" name="codePostal" id="codePostal" onChange="go()"/>
				<label>Ville</label>
				<div id="div_ville" style="display:inline">
				<select name="ville" id="ville">
					<option value="-1">Saisissez le code postal</option>
				</select>
                <input type="text" name="verif" id="verif" value="Vérif"/>
				</div>
			</fieldset>
		</form>

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
	echo '<select name="ville">';
	if(isset($_POST["codePostal"])){
		mysql_connect("localhost","root","");
		mysql_select_db("joserfages");
		$res = mysql_query("SELECT * FROM sg_ville WHERE codePostal=".$_POST["codePostal"]." ORDER BY ville");
		echo '<option value="-1">Choisissez la ville</option>';
		while($row = mysql_fetch_assoc($res)){
			echo '<option value="'.$row["idVille"].'">'.$row["ville"].'</option>';
		}
	}
	echo '</select>';
	echo '<input type="text" name="verif" value="'. mysql_num_rows($res) .'"/>';
?>

Et si je supprime la ligne
<input type="text" name="verif" id="verif" value="Vérif"/>
Plus rien ne fonctionne...

Or je ne veux pas rajouter de zone de texte dans mon formulaire au départ, j'aimerais qu'elle s'affiche à la place de la liste déroulante en cas où le code postal n'existe pas dans la base...
Ca y est je monologue, ça craint mdr !

**SpaceFrog** · 25/01/2010, 10h26

tu es sur que :
1- tes id sont uniques sur la page
2- ton responseTexte est bien formé ??

Le code postal met à jour la liste des villes (Ajax/PHP)

JavaScript

Discussions similaires

Partager

Partager