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.