faire afficher des données suivant une selection [Résolu]

[pi-2r]

Bonsoir,

je souhaite faire afficher des données lorsqu'un utilisateur sélectionne un chiffre depuis une liste déroulante.

par exemple j'ai tableau de 3 colonnes, avec dans une des colonnes une liste déroulante allant de 0 à 5. Je souhaite voir apparaitre dans la colonne suivante des données, si l'utilisateur choisi la valeur 1 ou 2. Dans le cas contraire rien ne s'affiche.
J'ai le code source suivant:

Code :

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
 
<table>
	<tr>
	<td><center>Agent</center></td>
	<td><center>Poste</center></td>
	<td><center>Option</center></td>
	</tr>
 
       <td>
	<center>
	<?php echo $donnees['prenom_agent'].' '.$donnees['nom_agent']; ?>
	</center>
	</td>
 
        <td>
        <center>
	<select name="poste" id="poste">
	<option value ="">choisir le poste</option>
	<?php
	for($i=1; $i<=5; $i++)
	{
	?>
	<option value="<?php echo $i;?>"><?php echo $i;?></option>
       <?php	
	}
	?>
       </select>
	</center>
	</td>
 
       <td>
      SI la données  vaut 1 ou 2, alors 
           afficher test
      Fin si
      </td>
</table>

il me semble qu'il faut utiliser du javascript, mais aillant de piètre connaissance dans ce domaine, je m'en remet donc à votre savoir.

Merci d'avance

[Vil'Coyote]

soit tu utilise une formulaire et tu réceptionne la valeur de ton option sélectionné et donc tu génère tes colonnes. soit tu utilise de l'ajax pour générer dynamiquement sans rafraîchir ta page.

[pi-2r]

et comment je peux utiliser de l'ajax pour résoudre mon problème ?
si tu as une piste, je suis preneur

[andry.aime]

Bonjour,

Regarde ce tutoriel Web 2.0, allez plus loin avec AJAX et XMLHttpRequest.

A+.

[pi-2r]

Merci andry.aime,

c'est ce principe de fonctionnement que je cherchais

[pi-2r]

je suis de nouveau bloqué

en effet, ce morceau de code marche pour une seul ligne de mon tableau. Or mon tableau affiche tout les noms des agents suivant la base de données. Je peux avoir un employé comme 50.

j'ai le code suivant:

Code :

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
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
 
<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 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('GTD').innerHTML = leselect;
 
					}
 
				}
 
 
 
				// Ici on va voir comment faire du post
 
				xhr.open("POST","ajaxGTD.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 l'auteur
 
				sel = document.getElementById('post');
 
				idpost = sel.options[sel.selectedIndex].value;
 
				xhr.send("idpost="+idpost);
 
			}
 
		</script>
 
[.....]
 
	<table cellpadding="3" cellspacing="3">
 
				<tr>
 
				<td><center>chef</center></td>
 
				<td><center>nom</center></td>
 
				<td><center>Poste</center></td>
 
				<td><center>aptitude</center></td>
 
				<td><center>Spécialité</center></td>
 
				</tr>
 
				<?php
 
					$sql=mysql_query("SELECT *
 
								     FROM agent
							             WHERE id='$id_com'
 
							          ") or die(mysql_error());		
 
 
 
                                       while($donnees = mysql_fetch_array($sql))
 
				     { 
					<tr>
 
					<td>
 
					<center>
 
					<input type="radio" name="capt" value="cap" />
 
					</center>
 
					</td>
 
					</center>
 
					<input type="hidden" name="id_equip" value="<?php echo $id_com; ?>"/>
 
					</td>
 
					<td>
 
					<center>
 
					<?php echo $donnees['prenom_liste'].' '.$donnees['nom_liste']; ?>
 
					</center>
 
					</td>
 
					<td>
 
					<center>
 
					<select name='post' id='post' onchange='go()'>
 
					<option value='-1'>Off</option>
 
					<?
 
						for($i=1; $i<=5; $i++)
 
						{
 
							echo "<option value='".$i."'>".$i."</option>";
 
						}
 
					?>
 
					</select>
 
					</center>
 
					</td>
 
					<td>
 
					<div id='apt' style='display:inline'>
 
					</div>
 
					</td>
 
	                                <td>
 
					<div id='GTD' style='display:inline'>
 
					</div>
 
					</td>
 
					<?php
 
				}
 
			echo "<br/>";
 
		}
 
	}
 
echo "</table>";
?>

si quelqu'un peut m'éclairer, car pour moi c'est le flou complet

[andry.aime]

Salut pi-2r, ça vient des id, en générant le ligne tu as des id qui se répètent . Un id doit être unique dans un document. Concatène les id avec une variable qui s'incrémente depuis php et passe le en paramètre

Code javascript :

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
function go(ligne){
 
				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('GTD'+ligne).innerHTML = leselect;
 
					}
 
				}
 
 
 
				// Ici on va voir comment faire du post
 
				xhr.open("POST","ajaxGTD.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 l'auteur
 
				sel = document.getElementById('post'+ligne);
 
				idpost = sel.options[sel.selectedIndex].value;
 
				xhr.send("idpost="+idpost);
 
			}

Code :

1
2
3
4
5
6
7
8
////////////////////////////////////////////////
 $j=0;
                                       while($donnees = mysql_fetch_array($sql))
 
				     { 
					<tr>
..................
<select name='post' id='post<? echo $j;?>' onchange='go(<? echo $j;?>)'>

Incrémente pour tous les id et la valeur de $j aussi .

A+.

[pi-2r]

Un grand merci à toi andry.aime, ça marche

[pi-2r]

Bonjour,

j'ai encore besoin de votre aide
Pour la sélection du poste et l'affichage dans la colonne "spécialité" cela marche très bien.

Mais maintenant on me demande, la fonctionnalité suivante (toujours avec ces mêmes actions):

-lorsque que l'utilisateur sélectionne le poste, celui-ci affiche la spécialité si le poste est compris entre 1 et 2 (ça c'est déjà résolu :p ).
-Si l'utilisateur sélectionne un poste compris entre 3 et 5, il faut faire afficher un message dans la colonne aptitude.

Pour ce deuxième cas, j'ai essayé de copier la fonction, d'y ajouter une nouvelle condition suivant le choix, rien n'y fait, ça ne veux pas....

Si quelqu'un à des pistes, je suis preneur

Merci d'avance.

[philodido]

Salut, j'ai une piste : Tu incrémente l'Id de la colonne aptitude comme tu le fais pour GTD et dans ton js tu testes le renvoi du select :

Code :

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
function go(ligne){
 
				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('GTD'+ligne).innerHTML = leselect;
 
            if((leselect > 2) && (leselect < 6))
            {
              document.getElementById('apt'+ligne).innerHTML = 'le message que tu veux';
            }
 
					}
 
				}
 
 
 
				// Ici on va voir comment faire du post
 
				xhr.open("POST","ajaxGTD.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 l'auteur
 
				sel = document.getElementById('post'+ligne);
 
				idpost = sel.options[sel.selectedIndex].value;
 
				xhr.send("idpost="+idpost);
 
			}

[pi-2r]

Bonjour,

merci pour la piste, mais cela ne veut pas fonctionner...Je continue de chercher :p

[pi-2r]

truc tout bête, il fallait juste que je change le nom de ma fonction (function go () --> function gotruc() )