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.

**leblaireau12** · 21/10/2019, 15h02

Salut

Merci pour ta réponse

Question c'est quoi console console.log() ???? Et tu mets celà ou ??

Tu sais je commence en ajax alors je demande de l'indulgence !!!

Cordialement

Rajout

J'ai mis console.log() et je récupère bien ma valeur du champ input

Par contre j'ai cette erreur

Uncaught TypeError: Cannot read property 'style' of null
at XMLHttpRequest.xhr.onreadystatechange

Et là je coule

Help

Cordialement

Invité · 21/10/2019, 18h54

Bonjour,

1- si tu ne montres pas ton nouveau code... difficile à dire...

2- QUE contient le fichier oXHR.js ?

3-

Code :

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

1
2
3
<?php
header("Content-Type: text/xml");
echo "<?xml version=\"1.0\" encoding=\"utf-8\"?>";

Que vient faire cet echo ici ?

(où as-tu trouvé cette syntaxe ??)

Ce ne serait pas plutôt :

Code :

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

1
2
<?php
header('Content-type:text/html; charset=UTF-8');	// encodage UTF-8

**leblaireau12** · 22/10/2019, 07h53

Salut

Voila le fichier oXHR.js

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
 
function getXMLHttpRequest() {
	var xhr = null;
 
	if (window.XMLHttpRequest || window.ActiveXObject) {
		if (window.ActiveXObject) {
			try {
				xhr = new ActiveXObject("Msxml2.XMLHTTP");
			} catch(e) {
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			}
		} else {
			xhr = new XMLHttpRequest(); 
		}
	} else {
		alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
		return null;
	}
 
	return xhr;
}

Mon formulaire avec mon imput :

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
78
79
80
81
 
<!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>
<script type="text/javascript">
 
 
//function request(oSelect) {
	//var value = oSelect.options[oSelect.selectedIndex].value;
 
function select_dept_from_cp(oInput) {
	var cp = oInput.value;
	console.log(cp);
 
	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");
}
 
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 id="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="select_dept_from_cp(cp);"></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>

et mon fichier appeler pour "monter" mes départements

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
 
<?php
 
header('Content-type:text/html; charset=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>";
 
?>

Merci pour vos idées et votre patience !!

Cordialement

Invité · 22/10/2019, 09h26

Bonjour,

1- manifestement, tu as copié-collé du code, sans vraiment le comprendre.

2- voici un tuto : Web 2.0, allez plus loin avec AJAX et XMLHttpRequest
-> FAIS l'EXERCICE * ("Listes liées"), afin d'en comprendre le mécanisme.

Avec 2 <select>, on utilise onchange, et on envoie la valeur du 1er <select> (oSelect.options[oSelect.selectedIndex].value;, mais ça fonctionne aussi avec oSelect.value;)
Avec un <input> et un <select>, on utilise onkeyup (ou onblur), on envoie AUSSI la valeur de l'input (oInput.value;)

Le principe est le même.

(* il faut remplacer la syntaxe mysql_, obsolète, par celle de PDO)

**leblaireau12** · 22/10/2019, 17h29

Bon

Je suis allé voir le tuto qui a l'air plus simple que le script que j'avais du prendre sur le web
Donc je suis parti du tuto et si j'ai pris le code j'ai essayé de bien comprendre et je l'ai donc adapté à mon cas
Dans la console je vois bien mes chiffres apparaitre 1,12,120,1200 et 12000 donc j'en déduis que je récupère bien mes valeurs mais quand je quitte l'input ma liste département reste vide grrrrrrr

mon formulaire

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
78
79
80
81
82
83
84
85
86
87
 
<!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>-->
<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 après avoir "quitter" le champ input codepostal
			*/
			function select_dept_from_cp(){
				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('lst_departements').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","choixdepartement.php",true);
				// rajout pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ici la valeur du code postal
			var	codepostal = document.getElementById('codepostal').value;
				console.log(codepostal);
				xhr.send("codepostal="+codepostal);
			}
//-->
</script>
</head>
<?php
include('../01_scripts/connexion.php');
?>
<body>
<?php
?>
<form id="cp" method="post" action="">
	<table width="100%" border="1" cellspacing="1" cellpadding="0">
  <tbody>
    <tr>
      <td>Code Postal</td>
      <td><input type="text" name="codepostal" id="codepostal" size="6"  onkeyup="select_dept_from_cp();"></td>
    </tr>
    <tr>
      <td>Le département </td>
      	<td>
			<div id='lst_departements' style='display:inline'>
			<select name='lst_departements'></select>
			</div>
		</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>

et mon fichier php des départements

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
 
<?php
 
header('Content-type:text/html; charset=UTF-8');
include('../01_scripts/connexion.php'); // connexion à la base
 
echo "<select name='lst_departements'>";
 
if(isset($_POST['codepostal'])) {
        $codePostal=$_POST['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 "<option value='".$r["departementId"]."'>".$row["departementLibelle"]."</option>";
        }
}
 
echo "</select>";
 
?>

J'ai même des valeurs dans la fonction select_dept_from_cp() mais rien à faire toujours pas mon département Aveyron qui s'affiche quand je tape 12100 dans mon input !!

Cordialement

Rajout du 25/10/2019

Dans mon fichier choixdepartement.php j'ai ajouté un echo "toto"; juste avant le select de la liste : quand je tape un code postal toto apparait au dessus de ma liste deroulante => donc je ne vais pas dans le select etdonc c'est que je ne passe pas mon code postal !!

Bon je continue mes recherches !!!

Cordialement

liste déroulante liée à un champ texte

AJAX

Discussions similaires

Partager

Partager