[AJAX] Formulaire Interactif AJAX/PHP MYSQL

Bonjour à tous,

Je souhaite faire un formulaire interactif. Lorsque l'on choisit une région, la liste des département composants celle-ci apparaît dans une liste déroulante de type <select></select> et ainsi de suite concernant le code postal et la ville à choisir.

Mon problème est lorsque je choisis une région, la liste des départements qui compose la région, n'apparaît pas. Je ne vois pas d'où cela vient-il. Je vous laisse les sources.

Code HTML

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Formulaire Interactif Ajax/php</title>
        <script src="xhr.js"></script>
        <script src="fonction.js"></script>
    </head>
    <body>
    	<h1>Formulaire interactif avec Ajax et PHP/MySql</h1>
    	<form method="POST" action="">
    		<fieldset style="width:400px;">
    			<legend>Formulaire Habitations</legend>
    			<label for="region">Région:</label>
    			<select id="region" onChange="dpt()">
    				<option value="0">-</option>
				<?php
                                        $link = mysql_connect('localhost','root','');
                                        mysql_select_db('test');
                                        $query = 'SELECT * FROM region';
                                        $resultat=mysql_query($query);
                                        while($row = mysql_fetch_array($resultat)){
                                                        echo "<option value=".$row["idRegion"].">".utf8_encode($row["nomRegion"])."</option>\n\t\t\t\t";
                                                }
                                        mysql_free_result($resultat);
                                        mysql_close($link);
                                ?>
				</select><br/>
    			<label for="dpt">Département:</label>
    			<select id="dpt">
    				<option>-</option>
    			</select><br/>
    			<label for="cp">Code Postal:</label>
    			<select id="cp">
    				<option>-</option>
    			</select><br/><br/>
    			<label for="ville">Ville:</label>
    			<select id="ville">
    				<option>-</option>
    			</select><br/>				
			</fieldset>
		</form>
    </body>
</html>

Code PHP

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?php
	if(isset($_POST['idRegion']))
	{
 
		//lien bdd
		$link = mysql_connect('localhost','root','');
		mysql_select_db('test');
 
		//requete vers la base de données
		$query = 'SELECT department.idDpt,departement.nomDpt FROM departement,region WHERE departement.idRegion=region.idRegion And region.idRegion='$_POST['idRegion'];
		$result = mysql_query($query);
 
		while($row=mysql_fetch_array($result))
			{
				echo '<option value='.$row["idDpt"].'>'.utf8_encode($row["nomDpt"]).'</option>'."\n\t\t\t\t";
			}
	}
	//liberation des ressources
	mysql_free_result($result);
	mysql_close($link);
?>

Code Javascript

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function dpt(){
	var requete = xhr();
 
	//Methode post
	requete.open("POST","dpt.php",true);
 
	//callback
	requete.onreadystatechange = function(){
		if(requete.readyState==4 && requete.status==200){
			document.getElementById('dpt').innerHTML= requete.responseText;
		}
	}
 
	//entete
	requete.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    var region = getElementById('region');
    var idRegion = region.options[region.selectedIndex].value;
    //envoi de la requete
    requete.send("idRegion"+idRegion);
}