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 : 323
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 : 338
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 : 305
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!

Auto Complétion - Menu déroulant

Langage PHP

Vue hybride

Discussions similaires

Partager

Partager