liste déroulante liée à un champ texte

**leblaireau12** · 02/10/2019, 09h29

Bonjour

Dans un formulaire j'ai un champ texte pour mettre le code postal

Je voudrais que lorsqu'on rentre le code postal le département correspond s'affiche dans la liste departements

J'avais fait la même chose avec les regions et les départements : montage d'une région par rapport au département mais là je vois pas comment faire

Si vous avez des suggestions ou autres je suis preneur

Cordialement

**kevin254kl** · 02/10/2019, 10h57

Salut,

Justement le tuto existe déjà

https://x-zolezzi.developpez.com/tut...utocompletion/ adapte le selon ton besoin, tu auras logiquement besoin que de la requête ajax lors du changement d'état du champ code postal qui récupéra le nom de la ville à mon avis.

**leblaireau12** · 03/10/2019, 08h12

Salut

Oui j'avais déjà utilisé ce script et il est super

Mais la ce que je veux c'est un peu différent : j'ai une table département que je monte dans une liste et ce que je voudrais c'est remonter le département en fonction des 2 premiers chiffres du code postal.

Par exemple la personne tape le code postal 12100 et le département Aveyron apparaît dans la liste départements : est-ce que vous pensez que je peux adapter ce script à ce que je voudrais faire ??

Cordialement

Invité · 03/10/2019, 09h41

Bonjour,

le principe est le même, que ce soient 2 listes liées, ou 1 liste <select> et un <input>.

La différence est qu'on fera sur l'<input> : "(on)keyup" au lieu de "(on)change".

Et pour déclencher l'action à partir du 2ème chiffre :

Code :

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

if( cp.length >= 2 ){

**leblaireau12** · 21/10/2019, 11h55

Salut

Avant d'essayer la proposition précédente je me suis dit : je vais essayer de faire mon propre truc (quitte à prendre la solution proposée si la mienne ne fonctionne pas)

Don je me suis fait une page avec un formulaire basique : champ texte (pour mon code postal) et une liste déroulante pour mes départements : précision dans ma table départements l'id auto increment n'est pas le le numéro du département (par exemple le département 33 a l'id 5 : j'ai fait cela au cas ou nos politiciens toujours en quête de sensations voudrais changer le num de leur département !!)

Donc voici mon formulaire de départ

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
68
69
70
71
72
73
74
75
76
77
 
<!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 type="text/javascript" src="../01_scripts/oXHR.js"></script> (appel de l'instance ajax)
<script type="text/javascript">
<!-- 
 
function request(oSelect) {
	var value = oSelect.options[oSelect.selectedIndex].value;
	var xhr   = getXMLHttpRequest();
 
	xhr.onreadystatechange = function() {
		if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
			readData(xhr.responseXML);
			document.getElementById("loader").style.display = "none";
		} else if (xhr.readyState < 4) {
			document.getElementById("loader").style.display = "inline";
		}
	};
 
	xhr.open("POST", "choixdepartement.php", true);
	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//	xhr.send("departementId=" + value);
	xhr.send("cp"); (mon code postal)
}
 
function readData(oData) {
	var nodes   = oData.getElementsByTagName("item");
	var oSelect = document.getElementById("lst_departements");
	var oOption, oInner;
 
	oSelect.innerHTML = "";
	for (var i=0, c=nodes.length; i<c; i++) {
		oOption = document.createElement("option");
		oInner  = document.createTextNode(nodes[i].getAttribute("departementLibelle"));
		oOption.value = nodes[i].getAttribute("departementId");
 
		oOption.appendChild(oInner);
		oSelect.appendChild(oOption);
	}
}
//-->
</script>
</head>
<?php
include('../01_scripts/connexion.php');
?>
<body>
<?php
?>
<form name="cp" method="post" action="01_enreg_cp.php">
	<table width="100%" border="1" cellspacing="1" cellpadding="0">
  <tbody>
    <tr>
      <td>Code Postal</td>
      <td><input type="text" name="cp" size="6"  onblur="request(this);"></td>
    </tr>
    <tr>
      <td>Le département </td>
      <td><select id="lst_departements"></select></td>
    </tr>
    <tr>
      <td colspan="2">&nbsp;</td>
 
    </tr>
    <tr>
     <td colspan="2"><input type="submit" name="envoyer" value="Enregistrer"</td>
    </tr>
  </tbody>
</table>
 
</form>
</body>
</html>

Puis voici ma page choixdepartement.php (j'avais fait la même chose pour les régions et c'était nickel) et je pense que c'est au niveau du code postal que cela coince !!

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
 
<?php
 
header("Content-Type: text/xml");
echo "<?xml version=\"1.0\" encoding=\"utf-8\"?>";
include('../01_scripts/connexion.php');
include('../01_scripts/lib.php');
echo "<list>";
 
$codePostal = (isset($_POST["cp"])) ? htmlentities($_POST["cp"]) : NULL;
if ($codePostal) {
        
        $departementNumero = substr($codePostal,0,-3);
 
        $sql = "SELECT departementId,departementLibelle,departementNumero FROM gp_departements WHERE departementNumero = '$departementNumero'";
        $req = $db->prepare($sql);
        $req->bindValue(':departementNumero', $departementNumero,PDO::PARAM_INT);
        $req->execute();
        $r = $req->fetch();
        $departementId=$r['departementId'];
        $departementLibelle=$r['departementLibelle'];
        while ($r = $req->fetch()) {    
//              echo "<item id=\"" . $back["id"] . "\" name=\"" . $back["name"] . "\" />";
                echo "<item departementId=\"" . $r["departementId"] . "\" departementLibelle=\"" . $r["departementLibelle"] . "\" />";
        }
}
 
echo "</list>";
 
?>

Ou est mon erreur ??

Cordialement

Invité · 21/10/2019, 12h34

Bonjour,

Envoyé par leblaireau12

...Ou est mon erreur ??...

Il va falloir être PLUS PRÉCIS que ça...

1-

Code :

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

1
2
function request(oSelect) {
	var value = oSelect.options[oSelect.selectedIndex].value;

Déjà, mets des noms de variables/fonctions plus explicites.

Ici, tu dois récupérer un <input>. Or, tu utilises la syntaxe pour un <select>.
Pour un <input> :

Code :

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

1
2
function select_dept_from_input_cp(oInput) {
	var value = oInput.value;

2- Ensuite, mets des explications dans ton code, ainsi que des console.log() pour savoir ce que contiennent les données.

liste déroulante liée à un champ texte

AJAX

Vue hybride

Discussions similaires

Partager

Partager