[AJAX] Compléter automatiquement le champ ville en fonction d'un code postal saisie

**polemoss** · 06/07/2009, 16h44

Bonjour,

Je recherche une solution pour compléter le champ ville d'un formulaire en fonction d'un code postal saisie avant, cela signifie aussi qu'il faut pouvoir trouvez la liste des villes et codes postal de toutes les villes de france.

Voilà je voulais savoir si vous aviez des idées de scripts déjà fait

Merci

**polemoss** · 06/07/2009, 18h00

Re,

Voici ce que j'ai fais en Jquery

page principale

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<script src="js/jquery-1.2.6.js" type="text/javascript"></script>
<script type="text/javascript">
function completionVille(value) { 
    alert(value);
    $.post('villes.php', { cp : value },
    function success(data){
 
        document.getElementById("ville").value = data;
 
        document.getElementById("dep").value = value.substring(0,2);
 
    });
}
</script>
 
</head>
 
<body>
<form name="cp" method="post">
cp : <input type="text" name="cp" onchange="completionVille(this.value);" /><br />
ville : <input type="text" name="ville" id="ville" /><br />
département ! <input type="text" name="dep" id="dep" /><br />
<input type="submit" name="submit" />
</form>
</body>
</html>

Et la page villes.php qui s'occupe de la requête sql

Code :

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

1
2
3
4
5
6
7
8
9
 
<?php
include('conf/conf.php');
if(isset($_POST['cp'])){
    $select = mysql_query("SELECT Ville FROM cp WHERE CP = '".$_POST['cp']."'")or die(mysql_error());
    $query = mysql_fetch_assoc($select);
    echo $query['Ville'];
}
?>

Bon j'ai fais ce code en quelques minute et me satisfait pleinement par rapport au besoin que j'ai, si jamais vous avez des améliorations ou des suggestions à me faire n'hésitez pas à me le faire savoir

A bientôt

**bergie** · 06/07/2009, 18h24

Salut,

Juste un truc, tu ne peux pas utiliser un champ text puisque un code postal peut correspondre à plusieurs villes (71290 par exemple).
J'ai posté juste avant toi mon code pour la même chose mais avec une liste déroulante, le seul problème est que ça ne fonctionne pas. ^^
Donc si ça t'intéresse et que tu trouves le problème de mon code... Hésite pas

Merci

**polemoss** · 06/07/2009, 19h16

Re,

Et bien écoute c'est pas très compliqué, déjà passe à Jquery si c'est pas déjà fais car c'est bien plus simple voici ce que j'ai fais sur la page du formulaire :

Je prépare dans ma fonction js un petite fonction qui va extraire les données php sous forme d'un tableau js.

Ensuite je boucle sur le nombre d'élément de mon tableau et je construis mon select ainsi

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
<script src="js/jquery-1.2.6.js" type="text/javascript"></script>
 
<script type="text/javascript">
function completionVille(value) { 
    //alert(value);
    $.post('villes.php', { cp : value },
    function success(data){
 
        var the_option = data.split('/')
        if(the_option.length > 0){
            for(i = 0; i < the_option.length; i++){
                document.forms['the form'].ville.options[i] = new Option(the_option[i],the_option[i]);
            }
        }
        else{
            document.forms['the form'].ville.options[0] = new Option(data,data);
        }
        //document.getElementById("ville").value = data;
 
        document.getElementById("dep").value = value.substring(0,2);
 
    });
}
</script>
 
</head>
 
<body>
<form name="the form" method="post">
cp : <input type="text" name="cp" onchange="completionVille(this.value);" /><br /><br />
ville : <select name="ville" id="ville">
            <!--<option value="">Choix</option>-->
        </select>
<br /><br />
département ! <input type="text" name="dep" id="dep" /><br /><br />
<input type="submit" name="submit" />
</form>
</body>
</html>

Note que si tu enleve la mise en commentaire de

Code :

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

<option value="">Choix</option>

Il faut que tu commence ta boucle à 1 et pas à 0

Et sur le fichier villes.php voici ce qu'il faut faire

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
 
<?php
include('conf/conf.php');
if(isset($_POST['cp'])){
    $select = mysql_query("SELECT Ville FROM cp WHERE CP = '".$_POST['cp']."'")or die(mysql_error());
    $option = '';
    while($query = mysql_fetch_assoc($select)){
        if(empty($option)){
            $option = ucfirst(strtolower($query['Ville']));
        }
        else{
            $option = $option.'/'.ucfirst(strtolower($query['Ville']));
        }
    }
    echo $option;
    //echo ucfirst(strtolower($query['Ville']));
}
?>

voilà chez moi ça marche A +

**bibifinal** · 07/10/2009, 17h43

bonjour, et désolé d'avance de uper le topic...
je cherche a faire exactement la meme chose, sauf qu'évidement cela ne fonctionne pas...

j'ai pourtant mon fichier "villes.php" qui me donne les villes quand je l'appelle mais la fonction completionVille ne me donne strictement rien.

je n'avais jamais touché au javascript avant donc il doit surement me manquer un petit truc mais je ne comprend pas quoi, je suppose que cela vien du passage de paramètre...

(a part la connexion, tout est identique)

oula j'ai expliqué cela comme d'habitude, n'importe comment je pense

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
<script language="Javascript" src="villes.php">
 
function completionVille(value) { 
    alert(value);
 
    $.post('villes.php', { cp : value },
    function success(data){
 
        var the_option = data.split('/')
        if(the_option.length > 0){
            for(i = 0; i < the_option.length; i++){
                document.forms['the form'].ville.options[i] = new Option(the_option[i],the_option[i]);
            }
        }
        else{
            document.forms['the form'].ville.options[0] = new Option(data,data);
        }
        //document.getElementById("ville").value = data;
 
        document.getElementById("dep").value = value.substring(0,2);
 
    });
}
</script>

pour le javascript devrais suffire non?

et au niveau de la page php:

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
<?php
include("identifiants.php");
//mysql_connect($adresse, $nom, $motdepasse);
//mysql_select_db($database);
mysql_connect($adresse, $nom, $motdepasse);
mysql_select_db($database);
 
if (isset($_POST['cp']))
	{
		$cp = $_POST['cp'];
    	$select = mysql_query("SELECT Ville FROM cp WHERE CP ='".$_POST['cp']."'")or die(mysql_error());
    $option = '';
    while($query = mysql_fetch_assoc($select)){
        if(empty($option)){
            $option = ucfirst(strtolower($query['Ville']));
        }
        else{
            $option = $option.'/'.ucfirst(strtolower($query['Ville']));
        }
    }
    echo $option;
 
	}		
	mysql_close();
?>

[AJAX] Compléter automatiquement le champ ville en fonction d'un code postal saisie

AJAX

Discussions similaires

Partager

Partager