Auto Complétion - Menu déroulant

**Sophiaduweb** · 15/06/2016, 12h06

Bonjour le peuple!

J'ai un petit problème (ou du moins une question).
Je vous explique !

J'ai un formulaire (ressemblant à ceci : )

Nom : f1.png
Affichages : 360
Taille : 12,4 Ko

Voici le code :

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
 
<script type="text/javascript">
	function verif ()
	{
		var etat = document.getElementById('check').checked;
 
		if(etat)
		{
			document.getElementById('1').className = 'on';
		}
		else
		{
			document.getElementById('1').className = 'off';
		}
	}
</script>
<style type="text/css">
.on {
    display: block;
}
 
.off {
    display: none;
}
</style>
completer champs en fonction select option
<form method="post" action="traitement.php">
	<tr> 
		<td width="12%" bgcolor="#E4E4E4">Famille d&eacute;j&agrave; existante ?</td>  
		<td width="20%" align="left" colspan="2" bgcolor="#FFFFFF">
			<input id="check" type="checkbox" onChange="verif();">
		</td>
		<div id="1" class="off">
			<td width="10%" align="left" colspan="2" bgcolor="#FFFFFF">
				<select name="TypsociPerso" size="1">
					<option value=''>- Choix -</option>
					<option value='1'>Binal</option>
					<option value='2'>Somier</option>
					<option value='3'>Sarod</option>
					<option value='4'>Timo</option>
					<option value='5'>Wiser</option>
				</select>
			</td>
		</div>
	</tr>
	<tr>
		<td  align="center" colspan="10">&nbsp;</td>
	</tr>
	<table width="100%" border="0" cellspacing="2" cellpadding="5">
		<tr>
			<td  align="center" colspan="10" bgcolor="#798081"><font color="#EFEFEF"><b>Informations</b></font></td>
			<tr>
				<td  align="center" colspan="10">&nbsp;</td>
			</tr>
			<tr> 
				<td width="12%" bgcolor="#C9C9C9">Nom famille</td>
				<td width="20%" align="left" colspan="2" bgcolor="#FFFFFF"><input name="Prenom" type="text" size="35" maxlength="35" ></td>
				<br>
			</tr>
			<tr>
				<td  align="center" colspan="10">&nbsp;</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td width="27%" align="center" bgcolor="#C9C9C9">Papa</td>
				<td width="27%" align="center" bgcolor="#C9C9C9">Maman</td>
				<td align="center" bgcolor="#C9C9C9">Voisin</td>
			</tr>
			<tr>
				<td align="center" bgcolor="#C9C9C9">Tel Fixe</td>
				<td align="center" bgcolor="#E4E4E4"><input name="TelFixePa" type="tel" maxlength="10" value=""></td>
				<td align="center" bgcolor="#E4E4E4"><input name="TelFixeMa" type="tel" maxlength="10" value=""></td>
				<td align="center" bgcolor="#E4E4E4"><input name="TelFixeVo" type="tel" maxlength="10" value=""></td>
			</tr>
			<tr>
				<td align="center" bgcolor="#C9C9C9">Tel Portable</td>
				<td align="center" bgcolor="#E4E4E4"><input name="TelPortPa" type="tel" maxlength="10" value=""></td>
				<td align="center" bgcolor="#E4E4E4"><input name="TelPortMa" type="tel" maxlength="10" value=""></td>
				<td align="center" bgcolor="#E4E4E4"><input name="TelPortVo" type="tel" maxlength="10" value=""></td>
			</tr>
			<td  align="center" colspan="10" bgcolor="#798081"><font color="#EFEFEF">-<i>15/06/2016</i>-</font></td>
		</tr>
	</table>
	<input type="submit" value="Valider" name="Valider">
</form>

A l'heure actuelle, si l'on clique sur la checkbox "Famille déjà existante?" un menu apparrait.
(Comme ceci

Nom : f2.png
Affichages : 386
Taille : 16,3 Ko

Ce que j'aimerai , c'est que lorsqu'on clique sur une famille, les champs ci dessous prennent les valeurs de la famille renseignées dans la base de données
(Comme ceci : )

Nom : f3.png
Affichages : 342
Taille : 16,3 Ko

Ma question est : Comment faire ? Quelqu'un peut il maider? Et partager quelques lignes de code avec moi au coin du feu.

... Jquery?
(Il n'y a pour l'instant aucun acces à la base de données, je viens simplement de mettre là le squellette du programme :p)

Merci d'avance !

Invité · 15/06/2016, 13h04

Bonjour,

ça va se faire en JavaScript / jQuery.
Avec ou sans Ajax.
Sur le principe des "listes déroulantes liées".

sans Ajax :

Créer des listes déroulantes liées entre elles sans utiliser Ajax

Avec jQuery/Ajax :
Si on suppose que ton <select> ait l'id "idChoixFamille" :

Code javascript :

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

1
2
3
4
5
6
7
$('#idChoixFamille').on('change' function(){
   var idChoixFamille = $(this).val();
   $.ajax({
      // ICI, appel du fichier PHP via Ajax
      // succes : affichage dans les input des valeurs récupérées
   });
});

**Sophiaduweb** · 15/06/2016, 14h16

Je ne maitrise hélas pas du tout JavaScript / jQuery / Ajax.

J'avais espoir que quelqu'un partage un code (même n'ayant aucun rapport avec mon code à moi) mais simplement pour que je puisse voir le cheminement du traitement des informations.

Je suis débutante en la matière, je vais quand même essayer de creuser ta piste

Merci de l'aide quand même

Invité · 15/06/2016, 14h25

Je t'ai mis des liens et un bout de code.

Si tu nous montrais TON code, on pourrait peut-être t'en dire plus.

Sinon :

L'avantage d'Ajax avec jQuery, c'est que la syntaxe est (relativement) très simple.

**Sophiaduweb** · 15/06/2016, 14h41

Oui j'ai vu le bout de code (et je t'en remercie

) mais je ne sais, pour le moment, pas quoi en faire (je ne sais pas utiliser la technologie).

C'est juste que je cherchais sur internet voir si quelqu'un avait déjà fait un code similaire de remplissage de champs depuis une selection de menu déroulant.

Je pensais que voir un code similaire dont je puisse m'inspirer pour adapter au miens aurait été une bonne chose.

Et pour ce qui est de mon code, tout est là. Je n'ai pas encore commencé le traitement avec ajax.

Je vais voir les liens que tu m'as envoyé, voir si je trouve mon bonheur , voir si d'un coup d’œil je trouve un cours dans lequel ils traitent l'insertion de données dans les input suite à une sélection d'un menu déroulant

**Sophiaduweb** · 15/06/2016, 16h02

C'est encore moi, je suis de retour

J'ai pas mal avancé sur la voie de l'ajax, j'ai terminé à 87% , il ne reste que 13% qui me bloque , j'ai encore besoin de vous

Voilà ou j'en suis :

nous avons famille.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
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
 
<script type='text/javascript'>
 
/*-------------------------------------*/
/* Affiche Résultat du Traitement XHR  */
/*-------------------------------------*/
 
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 sur le click du bouton
*/
function go(){
	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('reponse').innerHTML = leselect;
		}
	}
 
	// Ici on va voir comment faire du post
	xhr.open("POST","recupDonneesContact-xhr.php",true);
	// ne pas oublier ça pour le post
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	// ne pas oublier de poster les arguments
	// ici, l'id de la famille
	sel = document.getElementById('familleChoix');
	ct_id_famille = sel.options[sel.selectedIndex].value;
	xhr.send("ct_id_famille="+ct_id_famille);
}
 
 
 
 
 
 
	function verif ()
	{
		var etat = document.getElementById('check').checked;
 
		if(etat)
		{
			document.getElementById('familleChoix').className = 'on';
		}
		else
		{
			document.getElementById('familleChoix').className = 'off';
		}
	}
</script>
<style type="text/css">
.on {
    display: block;
}
 
.off {
    display: none;
}
</style>
<form method="post" action="traitement.php">
	<tr> 
		<td width="12%" bgcolor="#E4E4E4">Famille d&eacute;j&agrave; existante ?</td>  
		<td width="20%" align="left" colspan="2" bgcolor="#FFFFFF">
			<input id="check" type="checkbox" onChange="verif();">
		</td>
		<div id="1" class="off">
			<td width="10%" align="left" colspan="2" bgcolor="#FFFFFF">
				<select name="familleChoix" id="familleChoix" onchange='go()' size="1" class="off">
					<?php
					// Liste des familles
					$sql = "SELECT * FROM famille ORDER BY ct_nom,ct_prenom ASC";
					$resultat = mysql_query($sql);
					while ($rs = mysql_fetch_object($resultat))
					{
						print ("<option value='$rs->fam_id'>$rs->fam_nom </option>\n");
					}
					?>
				</select>
			</td>
		</div>
	</tr>
	<tr>
		<td colspan="4">
			<h2>Fenête de test pour voir les retours Ajax</h2>
			<!----------------
			Réponse de l'ajax
			----------------->
			<center>
			<div id="ombreout">
				<p>
					<div id='reponse' style='display:inline'></div>
				</p>
			</div>
			</center>
			<br>
 
			<!----------------
			Réponse de l'ajax
			----------------->
		</td>
	</tr>
	<tr>
		<td  align="center" colspan="10">&nbsp;</td>
	</tr>
	<table width="100%" border="0" cellspacing="2" cellpadding="5">
		<tr>
			<td  align="center" colspan="10" bgcolor="#798081"><font color="#EFEFEF"><b>Informations</b></font></td>
			<tr>
				<td  align="center" colspan="10">&nbsp;</td>
			</tr>
			<tr> 
				<td width="12%" bgcolor="#C9C9C9">Nom famille</td>
				<td width="20%" align="left" colspan="2" bgcolor="#FFFFFF"><input name="Prenom" type="text" size="35" maxlength="35" ></td>
				<br>
			</tr>
			<tr>
				<td  align="center" colspan="10">&nbsp;</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td width="27%" align="center" bgcolor="#C9C9C9">Papa</td>
				<td width="27%" align="center" bgcolor="#C9C9C9">Maman</td>
				<td align="center" bgcolor="#C9C9C9">Voisin</td>
			</tr>
			<tr>
				<td align="center" bgcolor="#C9C9C9">Tel Fixe</td>
				<td align="center" bgcolor="#E4E4E4"><input name="TelFixePa" type="tel" maxlength="10" value=""></td>
				<td align="center" bgcolor="#E4E4E4"><input name="TelFixeMa" type="tel" maxlength="10" value=""></td>
				<td align="center" bgcolor="#E4E4E4"><input name="TelFixeVo" type="tel" maxlength="10" value=""></td>
			</tr>
			<tr>
				<td align="center" bgcolor="#C9C9C9">Tel Portable</td>
				<td align="center" bgcolor="#E4E4E4"><input name="TelPortPa" type="tel" maxlength="10" value=""></td>
				<td align="center" bgcolor="#E4E4E4"><input name="TelPortMa" type="tel" maxlength="10" value=""></td>
				<td align="center" bgcolor="#E4E4E4"><input name="TelPortVo" type="tel" maxlength="10" value=""></td>
			</tr>
			<td  align="center" colspan="10" bgcolor="#798081"><font color="#EFEFEF">-<i>15/06/2016</i>-</font></td>
		</tr>
	</table>
	<input type="submit" value="Valider" name="Valider">
</form>

et famille-xhr.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
 
<?php
if(isset($_POST["ct_id_famille"]))
{
	$id = $_POST["ct_id_famille"];
 
	$AjaxSQL = "SELECT * FROM famille where fam_id=$id";
	$execAjaxSQL = mysql_query($AjaxSQL);
 
	while ($ligne = mysql_fetch_object($execAjaxSQL)) 
	{				
		$nom = $ligne->fam_nom;	
		$telFixePapa = $ligne->fam_tel_fixe_papa;	
		$telFixeMaman = $ligne->fam_tel_fixe_maman;	
		$telFixeVoisin = $ligne->fam_tel_fixe_voisin;	
		$telPortPapa = $ligne->fam_tel_port_papa;	
		$telPortMaman = $ligne->fam_tel_port_maman;	
		$telPortVoisin = $ligne->fam_tel_port_voisin;	
	}
	echo "<font color=green>Nous recuperons les informations de la famille '<b>".$nom."</b>' !</font>";
}
 
?>

dans mon famille.php j'ai les lignes suivantes qui me permettent d'avoir le retour de l'ajax (c'est des lignes de test , pour voir si j'ai bien un retour)

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
 
	<tr>
		<td colspan="4">
			<h2>Fenête de test pour voir les retours Ajax</h2>
			<!----------------
			Réponse de l'ajax
			----------------->
			<center>
			<div id="ombreout">
				<p>
					<div id='reponse' style='display:inline'></div>
				</p>
			</div>
			</center>
			<br>
 
			<!----------------
			Réponse de l'ajax
			----------------->
		</td>
	</tr>

et en effet j'ai bien un retour, quand je selectionne une famille j'ai le message :

"Nous recuperons les informations de la famille Berger ! "

Ma question est maitenant : Comme utiliser ces données récupérées pour les mettre dans les value=' ' de mes input ?

... J'arrive a récupérer pour afficher dans le div, mais apres?

Merci d'avance!

Invité · 15/06/2016, 16h31

Tu vois : quand on veut, on peut

Il existe plusieurs méthodes :
1/ remplacer les values de chaque input (nécessite un retour json)
2/ remplacer l'ensemble du bout de code HTML

=> voici la 2ème méthode.

A/ Ajouter un div autour de l'ensemble du code à remplacer :

Code html :

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
		<div id="box-coordonnees-famille-ajax">
		<table width="100%" border="0" cellspacing="2" cellpadding="5">
			<tr>
				<td  align="center" colspan="10" bgcolor="#798081"><font color="#EFEFEF"><b>Informations</b></font></td>
				<tr>
					<td  align="center" colspan="10">&nbsp;</td>
				</tr>
				<tr> 
					<td width="12%" bgcolor="#C9C9C9">Nom famille</td>
					<td width="20%" align="left" colspan="2" bgcolor="#FFFFFF"><input name="Prenom" type="text" size="35" maxlength="35" ></td>
					<br>
				</tr>
				<tr>
					<td  align="center" colspan="10">&nbsp;</td>
				</tr>
				<tr>
					<td>&nbsp;</td>
					<td width="27%" align="center" bgcolor="#C9C9C9">Papa</td>
					<td width="27%" align="center" bgcolor="#C9C9C9">Maman</td>
					<td align="center" bgcolor="#C9C9C9">Voisin</td>
				</tr>
				<tr>
					<td align="center" bgcolor="#C9C9C9">Tel Fixe</td>
					<td align="center" bgcolor="#E4E4E4"><input name="TelFixePa" type="tel" maxlength="10" value=""></td>
					<td align="center" bgcolor="#E4E4E4"><input name="TelFixeMa" type="tel" maxlength="10" value=""></td>
					<td align="center" bgcolor="#E4E4E4"><input name="TelFixeVo" type="tel" maxlength="10" value=""></td>
				</tr>
				<tr>
					<td align="center" bgcolor="#C9C9C9">Tel Portable</td>
					<td align="center" bgcolor="#E4E4E4"><input name="TelPortPa" type="tel" maxlength="10" value=""></td>
					<td align="center" bgcolor="#E4E4E4"><input name="TelPortMa" type="tel" maxlength="10" value=""></td>
					<td align="center" bgcolor="#E4E4E4"><input name="TelPortVo" type="tel" maxlength="10" value=""></td>
				</tr>
				<td  align="center" colspan="10" bgcolor="#798081"><font color="#EFEFEF">-<i>15/06/2016</i>-</font></td>
			</tr>
		</table>
		</div>

Ce div a pour id "box-coordonnees-famille-ajax".

B/ fichier appelé par Ajax :

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
<?php
if(isset($_POST["ct_id_famille"]))
{
	$id = $_POST["ct_id_famille"];
 	 // (ne pas oublier la connexion à la base de données)
	$AjaxSQL 		= "SELECT * FROM famille where fam_id=$id";
	$execAjaxSQL 	= mysql_query($AjaxSQL);
	$reqNombre 		= mysql_num_rows( $execAjaxSQL );
	// ------------------
	// si on trouve bien une famille
	if( $reqNombre > 0 )
	{
		while ($ligne = mysql_fetch_object($execAjaxSQL)) 
		{				
			$nom 			= $ligne->fam_nom;	
			$telFixePapa 	= $ligne->fam_tel_fixe_papa;	
			$telFixeMaman 	= $ligne->fam_tel_fixe_maman;	
			$telFixeVoisin 	= $ligne->fam_tel_fixe_voisin;	
			$telPortPapa 	= $ligne->fam_tel_port_papa;	
			$telPortMaman 	= $ligne->fam_tel_port_maman;	
			$telPortVoisin 	= $ligne->fam_tel_port_voisin;	
		}
	} 
	// ------------------
	// sinon
	else {
			$nom 			= '';	
			$telFixePapa 	= '';	
			$telFixeMaman 	= '';	
			$telFixeVoisin 	= '';	
			$telPortPapa 	= '';	
			$telPortMaman 	= '';	
			$telPortVoisin 	= '';	
	}
	// ------------------
?>
		<table width="100%" border="0" cellspacing="2" cellpadding="5">
			<tr>
				<td  align="center" colspan="10" bgcolor="#798081"><font color="#EFEFEF"><b>Informations</b></font></td>
				<tr>
					<td  align="center" colspan="10">&nbsp;</td>
				</tr>
				<tr> 
					<td width="12%" bgcolor="#C9C9C9">Nom famille</td>
					<td width="20%" align="left" colspan="2" bgcolor="#FFFFFF"><input name="Nom" type="text" size="35" value="<?php echo $nom; ?>" maxlength="35" ></td>
					<br>
				</tr>
				<tr>
					<td  align="center" colspan="10">&nbsp;</td>
				</tr>
				<tr>
					<td>&nbsp;</td>
					<td width="27%" align="center" bgcolor="#C9C9C9">Papa</td>
					<td width="27%" align="center" bgcolor="#C9C9C9">Maman</td>
					<td align="center" bgcolor="#C9C9C9">Voisin</td>
				</tr>
				<tr>
					<td align="center" bgcolor="#C9C9C9">Tel Fixe</td>
					<td align="center" bgcolor="#E4E4E4"><input name="TelFixePa" type="tel" maxlength="10" value="<?php echo $telFixePapa; ?>"></td>
					<td align="center" bgcolor="#E4E4E4"><input name="TelFixeMa" type="tel" maxlength="10" value="<?php echo $telPortMaman; ?>"></td>
					<td align="center" bgcolor="#E4E4E4"><input name="TelFixeVo" type="tel" maxlength="10" value="<?php echo $telPortVoisin; ?>"></td>
				</tr>
				<tr>
					<td align="center" bgcolor="#C9C9C9">Tel Portable</td>
					<td align="center" bgcolor="#E4E4E4"><input name="TelPortPa" type="tel" maxlength="10" value="<?php echo $telPortPapa; ?>"></td>
					<td align="center" bgcolor="#E4E4E4"><input name="TelPortMa" type="tel" maxlength="10" value="<?php echo $telPortMaman; ?>"></td>
					<td align="center" bgcolor="#E4E4E4"><input name="TelPortVo" type="tel" maxlength="10" value="<?php echo $telPortVoisin; ?>"></td>
				</tr>
				<td  align="center" colspan="10" bgcolor="#798081"><font color="#EFEFEF">-<i>15/06/2016</i>-</font></td>
			</tr>
		</table>
<?php
}

C/ Ajax : on transfert le résultat dans la div "box-coordonnees-famille-ajax" avec innerHTML :

Code javascript :

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
/**
* Méthode qui sera appelée sur le click du bouton
*/
function go(){
	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){
			leHTML = xhr.responseText;
			// On se sert de innerHTML pour rajouter les options a la liste
			document.getElementById('box-coordonnees-famille-ajax').innerHTML = leHTML;
		}
	}
 
	// Ici on va voir comment faire du post
	xhr.open("POST","recupDonneesContact-xhr.php",true);
	// ne pas oublier ça pour le post
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	// ne pas oublier de poster les arguments
	// ici, l'id de la famille
	sel = document.getElementById('familleChoix');
	ct_id_famille = sel.options[sel.selectedIndex].value;
	xhr.send("ct_id_famille="+ct_id_famille);
}

Invité · 15/06/2016, 16h36

2 REMARQUES IMPORTANTES :

1/ l'extension mysql_ est OBSOLETE (depuis 10 ans !) et sera bientôt supprimée :
=> utiliser mysqli_ ou PDO.

2/ les <table> servent à afficher des données tabulaires.
PAS (plus) à faire de la mise en page !

**Sophiaduweb** · 15/06/2016, 17h08

Super, merci, je vais mettre en pratique tout ça

Mais il se pourrait que dans l'avenir la solution N°1 me sois plus utile (JSON). - Comment mettre cette technique en place, sur cet exemple ? -

Peux tu m'en dire deux mots? ^^ Comme ça j'essaierai de l'appliquer à cet exemple (et si je n'y arrive pas, je ferai la méthone N°2)

Invité · 15/06/2016, 21h26

Solution 1 : remplacer les values de chaque input (nécessite un retour json)

1/ on identifie chaque input (id="..." ):

Code html :

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
		<table width="100%" border="0" cellspacing="2" cellpadding="5">
			<tr>
				<td  align="center" colspan="10" bgcolor="#798081"><font color="#EFEFEF"><b>Informations</b></font></td>
				<tr>
					<td  align="center" colspan="10">&nbsp;</td>
				</tr>
				<tr> 
					<td width="12%" bgcolor="#C9C9C9">Nom famille</td>
					<td width="20%" align="left" colspan="2" bgcolor="#FFFFFF"><input name="Nom" id="idNom" type="text" size="35" maxlength="35" ></td>
					<br>
				</tr>
				<tr>
					<td  align="center" colspan="10">&nbsp;</td>
				</tr>
				<tr>
					<td>&nbsp;</td>
					<td width="27%" align="center" bgcolor="#C9C9C9">Papa</td>
					<td width="27%" align="center" bgcolor="#C9C9C9">Maman</td>
					<td align="center" bgcolor="#C9C9C9">Voisin</td>
				</tr>
				<tr>
					<td align="center" bgcolor="#C9C9C9">Tel Fixe</td>
					<td align="center" bgcolor="#E4E4E4"><input name="TelFixePa" id="idTelFixePa" type="tel" maxlength="10" value=""></td>
					<td align="center" bgcolor="#E4E4E4"><input name="TelFixeMa" id="idTelFixeMa" type="tel" maxlength="10" value=""></td>
					<td align="center" bgcolor="#E4E4E4"><input name="TelFixeVo" id="idTelFixeVo" type="tel" maxlength="10" value=""></td>
				</tr>
				<tr>
					<td align="center" bgcolor="#C9C9C9">Tel Portable</td>
					<td align="center" bgcolor="#E4E4E4"><input name="TelPortPa" id="idTelPortPa" type="tel" maxlength="10" value=""></td>
					<td align="center" bgcolor="#E4E4E4"><input name="TelPortMa" id="idTelPortMa" type="tel" maxlength="10" value=""></td>
					<td align="center" bgcolor="#E4E4E4"><input name="TelPortVo" id="idTelPortVo" type="tel" maxlength="10" value=""></td>
				</tr>
				<td  align="center" colspan="10" bgcolor="#798081"><font color="#EFEFEF">-<i>15/06/2016</i>-</font></td>
			</tr>
		</table>

2/ Fichier PHP recupDonneesContact-xhr.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
<?php
if(isset($_POST["ct_id_famille"]))
{
	$id = $_POST["ct_id_famille"];
	 // (ne pas oublier la connexion à la base de données)
	$AjaxSQL 		= "SELECT * FROM famille where fam_id=$id";
	$execAjaxSQL 	= mysql_query($AjaxSQL);
	$reqNombre 	= mysql_num_rows( $execAjaxSQL );
	// ------------------
	// si on trouve bien une famille
	if( $reqNombre > 0 )
	{
		while ($ligne = mysql_fetch_object($execAjaxSQL)) 
		{				
			$Nom 		= $ligne->fam_nom;	
			$telFixePapa 	= $ligne->fam_tel_fixe_papa;	
			$telFixeMaman 	= $ligne->fam_tel_fixe_maman;	
			$telFixeVoisin 	= $ligne->fam_tel_fixe_voisin;	
			$telPortPapa 	= $ligne->fam_tel_port_papa;	
			$telPortMaman 	= $ligne->fam_tel_port_maman;	
			$telPortVoisin 	= $ligne->fam_tel_port_voisin;	
		}
	} 
	// ------------------
	// sinon
	else {
			$Nom 		= '';	
			$telFixePapa 	= '';	
			$telFixeMaman 	= '';	
			$telFixeVoisin 	= '';	
			$telPortPapa 	= '';	
			$telPortMaman 	= '';	
			$telPortVoisin 	= '';	
	}
	// ------------------
	// Retour Ajax
	$retour['Nom']			= $Nom;
	$retour['telFixePapa']		= $telFixePapa;
	$retour['telFixeMaman']		= $telFixeMaman;
	$retour['telFixeVoisin']	= $telFixeVoisin;
	$retour['telPortPapa']		= $telPortPapa;
	$retour['telPortMaman']		= $telPortMaman;
	$retour['telPortVoisin']	= $telPortVoisin;
	echo json_encode($retour); // important
	// ------------------
<?php
}

3/ JavaScript :

Code JavaScript :

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
function go(){
	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){
			retourjson = xhr.responseText;
			// On change les values des input
			document.getElementById('idNom').value = retourjson.Nom;
			document.getElementById('idtelFixePapa').value = retourjson.telFixePapa;
			document.getElementById('idtelFixeMaman').value = retourjson.telFixeMaman;
			document.getElementById('idtelFixeVoisin').value = retourjson.telFixeVoisin;
			document.getElementById('idtelPortPapa').value = retourjson.telPortPapa;
			document.getElementById('idtelPortMaman').value = retourjson.telPortMaman;
			document.getElementById('idtelPortVoisin').value = retourjson.telPortVoisin;
		}
	}
 
	// Ici on va voir comment faire du post
	xhr.open("POST","recupDonneesContact-xhr.php",true);
	// ne pas oublier ça pour le post
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	// ne pas oublier de poster les arguments
	// ici, l'id de la famille
	sel = document.getElementById('familleChoix');
	ct_id_famille = sel.options[sel.selectedIndex].value;
	xhr.send("ct_id_famille="+ct_id_famille);
}

N.B. Pense à

les réponses qui t'ont aidée

**Sophiaduweb** · 16/06/2016, 10h48

Bonjour, merci pour ta réponse

C'est sympa de m'aider

Je viens d'appliquer à la lettre ce que tu viens de poster, mais il y a un probleme

Lorsque je selectionne une famille, j'ai le retour Json qui vient remplacer les champs : Non pas par les données désirées mais par un "undefined"

.

A quoi est-ce dû ?

EDIT: J'ai pour l'occasion re-fait un exemple, il ne fonctionne pas. J'ai pourtant fait (je pense) ce qu'il fallait :

- contact.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
26
27
28
29
30
31
32
 
<?php include("connexion.php");?>
<script src="/script/scriptContact.js"></script>
<form name="form1" method="post" action="traitement.php">
	<table width="100%" border="0" cellspacing="2" cellpadding="5">
		<tr>
			<td width="12%" bgcolor="#E4E4E4">Contact d&eacute;j&agrave; existant ?</td>  
			<td>
				<input id="check" type="checkbox" onChange="verif();">
			</td>
			<td>
				<select name="contactExistant" id='contactExistant' onchange='go()' size="1" class="off">
					<?php
					// Liste des contacts
					$sqlContactExis = "SELECT * FROM tbl_contact ORDER BY ct_nom,ct_prenom ASC";
					$resultSqlContactExis = mysql_query($sqlContactExis);
					while ($resultExist = mysql_fetch_object($resultSqlContactExis))
					{
						print ("<option value='$resultExist->ct_id_contact'>$resultExist->ct_nom $resultExist->ct_prenom</option>\n");
					}
					?>
				</select>
			</td>
		</tr>
		<tr> 
			<td width="12%" bgcolor="#E4E4E4">Nom</td>  
			<td width="20%" align="left" colspan="2" bgcolor="#FFFFFF">
				<input name="Nom" id="idNom" type="text" size="30" maxlength="30">
			</td>
		</tr>
	</table>
</form>

- scriptContact.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
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
 
/*-------------------------------------*/
/* Affiche Résultat du Traitement XHR  */
/*-------------------------------------*/
 
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 sur le click du bouton
*/
function go(){
	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)
		{
			retourjson = xhr.responseText;
			document.getElementById('idNom').value = retourjson.Nom;
		}
	}
 
	// Ici on va voir comment faire du post
	xhr.open("POST","recupDonneesContact-xhr.php",true);
	// ne pas oublier ça pour le post
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	// ne pas oublier de poster les arguments
	// ici, l'id de la famille
	sel = document.getElementById('contactExistant');
	ct_id_fiche = sel.options[sel.selectedIndex].value;
	xhr.send("ct_id_fiche="+ct_id_fiche);
}

- recupDonneesContact-xhr.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
26
27
28
29
 
<?php include("connexion.php"); 
// Permet de récupérer le numéro de jonction d'un client , pour savoir s'il est disponnible ou non
if(isset($_POST["ct_id_fiche"]))
{
	$idCt = $_POST["ct_id_fiche"];
	$AjaxSQL = "SELECT * FROM tbl_contact where ct_id_fiche=$idCt";
	$execAjaxSQL = mysql_query($AjaxSQL);
	$reqNombre = mysql_num_rows($execAjaxSQL);
	if( $reqNombre > 0 )
	{
		while ($ligne = mysql_fetch_object($execAjaxSQL)) 
		{
			$Nom = $ligne->ct_nom;
		}
	}
	else 
	{
		$Nom = '';
	}
 
	// ------------------
	// Retour Ajax
	// ------------------
	$retour['Nom'] = $Nom;
	echo json_encode($retour); // important
	// ------------------
}
?>

PS : J'ai remarqué une petite erreur (?) les id ne correspondent pas, j'ai corrigé

Invité · 16/06/2016, 12h06

Bonjour,

une "petite" erreur de ma part :

Code javascript :

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

			var retourjson = JSON.parse(xhr.responseText);

**Sophiaduweb** · 16/06/2016, 12h16

Haha, super !

tout fonctionne parfaitement

Encore merci de l'aide, merci de ne pas m'avoir laissé tomber

Problème résolu

Auto Complétion - Menu déroulant

Langage PHP

Discussions similaires

Partager

Partager