Remplir automatiquement une zone texte après choix dans une liste déroulante ajax

**Claudine** · 04/01/2016, 11h25

Bonjour à tous et mes meilleurs voeux pour 2016

Dans un formulaire d'inscription, j'ai deux listes déroulantes liées en Ajax qui vont chercher les données dans une bdd avec une table nommée'ville' et qui comprend:
idville ------nom_ville----------id_province----------Nom_commune
13 ---------7061Casteau------- 1 ----------------- 7060Soignies

quand le choix de la province est 1(hainaut), la 2ème liste déroulante m'affiche la liste des villes correspondantes.
Donc quand je sélectionne '7061Casteau' dans la 2ème liste, j'aimerais afficher le correspondant 'Nom_commune' dans une zone de texte de mon formulaire.
Quelqu'un peut-il m'aider à résoudre ce problème?

Claudine

**NoSmoking** · 04/01/2016, 15h56

Bonjour,

j'aimerais afficher le correspondant 'Nom_commune' dans une zone de texte de mon formulaire.

cela reste le baBA, sur l'événement onchange du SELECT on modifie la value d'un élément INPUT.

Dans ce cas ilfaut prévoir que les OPTIONs du SELECT soient de la forme

Code html :

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

1
2
3
4
5
<select onchange="la_fonction_qui_affiche_la_valeur(this.value)">
    <option value="">Choisir une option</option>
    <option value="valeur #1 à afficher">Texte de sélection #1</option>
    <option value="valeur #2 à afficher">Texte de sélection #2</option>
</select>

**Claudine** · 07/01/2016, 12h32

bonjour NoSmoking

Merci pour votre réponse mais si c'est le BaBa, c'est grave car je ne vois pas du tout comment je pourrai afficher le Nom_commune correspondant à mon choix dans la 2ème liste déroulante 'ville' sans communication avec la bdd où tout s'y trouve
D'autre part vous me proposez une liste de choix à construire, mais un client qui veut s'inscrire ne connaît pas
la relation commune/ville; et je ne vois pas quel choix il pourrait faire: bref je n'y comprend rien.
Si vous vouliez adapter votre proposition à mon exemple peut-être pourrais-je comprendre?
Je croyais qu'il serait possible par requête de selectionner la commune sachant que le nom_ville = à la value de iddiv3(le choix de ma liste déroulante ville ajax) mais je n'y arrive pas.
Sincères remerciements et pitié pour les nuls de la programmation.
Claudine

**NoSmoking** · 07/01/2016, 18h35

Je n'ai pas tout compris

Si vous vouliez adapter votre proposition à mon exemple peut-être pourrais-je comprendre?

Sans plus d'informations sur les tenants et aboutissants difficile de t'aider plus.

Pourrais tu nous montrer le code généré de ton dernier SELECT.

**Claudine** · 08/01/2016, 12h17

Bonjour NoSmoking ,Merci pour votre aide.
Ci-dessous le code php:
:essai commune.php

Code php :

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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
<!DOCTYPE HTML>
<html dir="ltr" lang="fr">
<head>
	<meta charset="utf-8" />
	<title>Formulaire d'Inscription</title>
	<style type="text/css">
 
 body {
	background-color: #33FFCC;
}
</style>
 
<script src="scripts/jquery.1.5.1.min.js"></script> 
<script type="text/javascript">
	/* Initialisation XMLHttpRequest (obligatoire) */
	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;
	};
 
	/* Charger la liste "ville" après choix dans la liste "province" */
	function changeVilleParProvince( id_province, iddiv_ajax ){
		var id_province; // valeur de l'option ("id_province") choisie
		var iddiv_ajax; // id du div dans lequel on remplira la liste des "villes"
		var nom_province;
		var xhr = getXhr();
		xhr.onreadystatechange = function(){
			if(xhr.readyState == 4 && xhr.status == 200)
			{
				texthtml = xhr.responseText;
				// innerHTML va ajouter les options à la liste des "villes"
				document.getElementById(iddiv_ajax).innerHTML = texthtml;
			}
		}
		// on defini la methode (post) + le fichier de traitement + asynchrone (true)
		xhr.open("POST","ajaxVillesFromProvinces.php",true);
		// ne pas oublier ça pour le post
		xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		// on poste les parametres a transmettre au fichier qui fera le traitement
		xhr.send("id_province="+id_province);
	};
 
</script>
 
 
 
<style>
#formulaireBox { width:48em; margin:auto; border:1px solid black; padding:1em; }
#formulaireBox label { display:inline-block; min-width: 150px; }
#msgerreurBox { font-size:0.8em; font-weight:bold; color:red; }
</style>
</head>
 
<body>
 
<div id="formulaireBox">
	<h4>Formulaire</h4>
	<form action="#" method="post" id = "form_identification">	
 
 
<?php
 
?>
			</select>
			</span>
		</p>
 
		<legend>1: Choisissez d'abord une province. 2: Ensuite une ville. </legend> 
 
		<p>
			<label for="idid_province">1.Province : </label>
			<select id="id_province" name="id_province" onChange="changeVilleParProvince(this.options[this.selectedIndex].value,'iddiv3');">
				<!-- on appelle la fct sur le onchange (valeur-choisie, id-du-div-à-remplir) -->
				<option value="-1">Choisir une province</option>
<?php
 
// --------------------------------------------------------------
// Paramètres de connection a la Base de Données sur le serveur
// --------------------------------------------------------------
	$pdo_options[PDO::ATTR_ERRMODE] = PDO::ERRMODE_EXCEPTION;
	$pdo_options[PDO::MYSQL_ATTR_INIT_COMMAND]  = 'SET NAMES utf8';
	$pdo_options[PDO::ATTR_EMULATE_PREPARES] = false;
	$bdd = new PDO('mysql:host=localhost;dbname=provinces', 'root', '', $pdo_options);
// --------------------------------------------------------------
				// requete : liste de toutes les provinces
				$province_sql = "SELECT id_province, nom_province FROM province ORDER BY nom_province ASC;";
				$province_res = $bdd->prepare($province_sql);				  
				$province_res->execute(array());
				while($province_row = $province_res->fetch())
				{
					$selected = (isset($_SESSION['post_form']['id_province']) && $_SESSION['post_form']['id_province']==$province_row['id_province'])? ' selected="selected"' : '';
?>
				<option value="<?php echo $province_row['id_province']; ?>"<?php echo $selected; ?>><?php echo $province_row['nom_province']; ?></option>
<?php			} ?>
			</select>
		</p>
          <p>
			<label for="idid_ville">2. Ville : </label>
			<span id="iddiv3"><!-- c'est ici que par innerHTML AJAX va ecrire la liste2 -->
			<select id="idid_ville" name="id_ville">
			<?php		// déjà une province choisie
			if( isset($_SESSION['post_form']['id_province']) && $_SESSION['post_form']['id_province']>0){
			?>
 
		<option value="-1">Choisir une ville</option>
 
 
		// requete : la liste des "villes" de la province choisie
 
<?php  
 
// --------------------------------------------------------------
// Paramètres de connection a la Base de Données sur le serveur
// --------------------------------------------------------------
	$pdo_options[PDO::ATTR_ERRMODE] = PDO::ERRMODE_EXCEPTION;
	$pdo_options[PDO::MYSQL_ATTR_INIT_COMMAND]  = 'SET NAMES utf8';
	$pdo_options[PDO::ATTR_EMULATE_PREPARES] = false;
	$bdd = new PDO('mysql:host=localhost;dbname=provinces', 'root', '', $pdo_options);
// --------------------------------------------------------------
				// requete : liste de toutes les villes
				$ville_sql =	"SELECT  nom_ville FROM ville WHERE id_ville =  ?;"; 
 
				$ville_res = $bdd->prepare($ville_sql);				  
				$ville_res->execute(array($_SESSION['post_form']['id_province']));
				while($ville_row = $ville_res->fetch())
				{
					$selected = (isset($_SESSION['post_form']['id_ville']) && $_SESSION['post_form']['id_ville']==$ville_row['id_ville'])? ' selected="selected"' : '';
?>
				<option value="<?php echo $ville_row['id_ville']; ?>"<?php echo $selected; ?>><?php echo $ville_row['nom_ville']; ?></option>
<?php			
          }
          // SI pas de province choisie (-1) ou erreur : on met le select "par defaut" :
		}else{	  
?>
	<option value="-1">	Choisissez d'abord une province</option>
 
<?php
  }        
?>
		</select>
			</span>
		</p>  
		<!-- on appelle la fct sur le onchange (valeur-choisie, id-du-div-à-remplir) onChange=changeVilleParCommune(this.options[this.selectedIndex].value,'iddiv4')-->
		<p>		
	<label for="idid_commune">3.Commune : </label>
 
 
	  </p>
 
		<p style="margin-top:1.5em">
			<input name="envoyer" value="Envoyer" type="submit"/>
		</p>	  
 </div>
	</form>
<?php
if(!empty($_SESSION['post_form']['message']))
{
?>
	<ul id="msgerreurBox">
<?php
	foreach($_SESSION['post_form']['message'] as $value)
	{
		echo '<li>'.$value.'</li>';
	}
?>
</ul>
<?php
}
?>
</div>
 
</body>
</html>

claudine

**NoSmoking** · 09/01/2016, 11h30

Pourrais tu nous montrer le code généré de ton dernier SELECT.

je le répètes c'est le code HTML généré qui nous intéresse pas le code coté serveur.

Une remarque rapide, si tu charges la librairie jQuery pourquoi ne pas l'utiliser pour ta requête Ajax !?!

Remplir automatiquement une zone texte après choix dans une liste déroulante ajax

AJAX

Discussions similaires

Partager

Partager