Formulaire "conditionnel" ?

**andry.aime** · 07/03/2012, 18h02

Code :

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

1
2
3
4
5
sel = document.getElementById('categorie');
categorie = sel.options[sel.selectedIndex].value;
sel2 = document.getElementById('marque');
marque = sel2.options[sel2.selectedIndex].value;
xhr.send("categorie="+categorie+"&marque="+marque);

c'est à l'arrache mais vérifie bien les id.

A+.

**hotwheals** · 08/03/2012, 09h58

Bien le bonjour
J'ai fait ce changement Merci mais j'ai l'impression que ca n'envoi rien quand je clique ???
j'ai changé cela aussi je sais pas si c'est judicieux

ajaxcat.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
 
<?php
 
	echo "<select name='sel_cab' id='carburant' >";
	if(isset($_POST["categorie"]) and ($_POST["marque"])){
		mysql_connect();
		mysql_select_db();
		$res = mysql_query("SELECT distinct carburant FROM voiture 
			WHERE marque='".$_POST["marque"]."' and categorie='".$_POST["categorie"]."' ORDER BY carburant");
		while($row = mysql_fetch_assoc($res)){
			echo "<option value='".$row["carburant"]."'>".$row["carburant"]."</option>";
		}
	}
	echo "</select>";
?>

Mais je comprends pas pourquoi ca envoie pas je 'ai casiment rien changer

Code :

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

1
2
3
4
5
6
7
 
<label>categorie</label>
				<div style='display:inline' id='categorie'>
				<select name='sel_cat'  onchange='gocat()' >
					<option value='-1'>Choisir une categorie</option>
				</select>
				</div>

go cat()

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
 
function gocat(){
				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('carburant').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajaxcat.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('categorie');
				categorie = sel.options[sel.selectedIndex].value;
				sel2 = document.getElementById('marque');
				marque = sel2.options[sel2.selectedIndex].value;
				xhr.send("categorie="+categorie+"&marque="+marque);
			}

Pourquoi la troisième liste ne réagi pas...et ce quelque soit le choix fait!
Je crois que l'ajax ne m'aime pas XD

Merci

**rawsrc** · 08/03/2012, 10h17

Tu pourrais poster le code html de ta page stp modifiée après ton échange avec Andry

**hotwheals** · 08/03/2012, 10h21

Voila le code comportant le html

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
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
206
207
208
209
210
211
212
213
214
215
216
217
218
 
<?php
 
 
 
$connexion = @ mysql_connect() or exit("Impossible de se connecter !") ;
mysql_select_db();
 
$menu_query = "SELECT distinct marque FROM voiture ORDER BY marque" ;
$result = mysql_query( $menu_query ,$connexion ) or exit("Erreur dans la requête!");
while( $ligne=mysql_fetch_object($result) )
{ 
      $menu_marque[] = $ligne->marque ;
}
 
 
 
?>
 
<!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" />
<title>Document sans titre</title>
<style type="text/css">
<!--
.button {
	background: #c7ab1c;
	background: -webkit-gradient(linear, left top, left bottom, from(#c70a0a), to(#c7ab1c));
	background: -webkit-linear-gradient(top, #c70a0a, #c7ab1c);
	background: -moz-linear-gradient(top, #c70a0a, #c7ab1c);
	padding: 4.5px 9px;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
	-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
	-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
	box-shadow: rgba(0,0,0,1) 0 1px 0;
	text-shadow: rgba(0,0,0,.4) 0 1px 0;
	color: #003;
	font-size: 13px;
	font-family: Georgia, serif;
	text-decoration: none;
	vertical-align: middle;
	background-color: #C00;
	background-position: top;
	border: 1px inset #FC0;
   }
.button:hover {
   border-top-color: #0a033b;
   background: #0a033b;
   color: #e8f718;
   }
.button:active {
   border-top-color: #091f2e;
   background: #091f2e;
   }
   -->
</style>
 
		<title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>
		<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 gomarque(){
				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('categorie').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajaxmarque.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('marque');
				marque = sel.options[sel.selectedIndex].value;
				xhr.send("marque="+marque);
			}
 
 
			function gocat(){
				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('carburant').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajaxcat.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('categorie');
				categorie = sel.options[sel.selectedIndex].value;
				sel2 = document.getElementById('marque');
				marque = sel2.options[sel2.selectedIndex].value;
				xhr.send("categorie="+categorie+"&marque="+marque);
			}
		</script>
	</head>
 
<body>
<form name = "recherche" method="POST" action="recherche.php" target="résultat" align="right">
  <div align="center">
<table width="90%" border="0">
  <tr>
    <td><div align="center"><font size="-1"><strong><em><strong><font color="#FF0000" size="-1">RECHERCHE PERSONNALISEE</font></strong></em></strong></font></div></td>
  </tr>
  <tr>
    <td> <center></font>
		<form method='post'>
				<label>marque</label>
				<select name='sel_marque' id='marque' onchange='gomarque()'>
					<option value='-1'>Choisir une marque</option>
					<?
						mysql_connect(); 
						mysql_select_db();
						$res = mysql_query("SELECT distinct marque FROM voiture ORDER BY marque");
						while($row = mysql_fetch_assoc($res)){
							echo "<option value=".$row["marque"].">".$row["marque"]."</option>";
						}
					?>
				</select>
 
 
 
	 </td>
  </tr>
  <tr>
 
    <td> <center>
	<label>categorie</label>
				<div style='display:inline' id='categorie'>
				<select name='sel_cat'  onchange='gocat()' >
					<option value='-1'>Choisir une categorie</option>
				</select>
				</div>
	</center>
	</td>
 
  </tr>
  <tr>
    <td> <center>
 
 
                      <label>carburant</label>            
           <div  style='display:inline' id='carburant'>
				<select name='sel_cab'>
					<option value='-1'>Choisir le type de carburant</option>
				</select>
</div>
  </center></td>
 </tr>
  <tr>
    <td><div align="center">
                  <font color="#FFFFFF">
                <label><font color="#000000" size="-1"><strong>Budget entre</strong>                </font><font size="-1">
                <input name="sel_min" type="text" size="5" />
                </font> </label>
                <font color="#000000">-                </font>
                <input name="sel_max" type="text" size="5" />
                <font color="#000000"><strong>&euro;</strong></font></font></div></td>
  </tr>
  <tr>
    <td><div align="center"> <p><font size="-1"><strong><em>Classé par :</em></strong></font>
    <font size="-1">Prix</font>
                  <input name="sel_tri" type="radio" value="prix" checked="checked" />
                  <font size="-1">Modèle</font>
                  <input name="sel_tri" type="radio" value="modele" />
                  <font size="-1">Km</font>
                  <input name="sel_tri" type="radio" value="kilometre" />
</div></td>
  </tr>
  <tr>
    <td>  <div align="center">         
      <p><font color="#FFFFFF">
        <input type="submit" class="button" name="Submit1" value="Rechercher" action="rech.php" />
      </font></p>
      <p><font size="3" face="Comic Sans MS"><a href="admin/index.php" TARGET="popup" onClick="window.open('','popup',  'height=600, top=200, left=200, toolbar=no, menubar=no, location=no, resizable=no, scrollbars=no, status=no')"><img src="Sans titre.gif" height="16px" width="16px"border="0" alt="" align="center" /></a></font></p>
    </div></td>
  </tr>
</table>
</form>
</body>
</html>

Merci d'avance

**andry.aime** · 08/03/2012, 10h37

Peut-on voir les deux fonctions JS et les deux pages appelées?

**hotwheals** · 08/03/2012, 10h39

ajaxcat.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
 
<?php
 
	echo "<select name='sel_cab' id='carburant' >";
	if(isset($_POST["categorie"]) and ($_POST["marque"])){
		mysql_connect("mysql12.host7x24.com", "my118427","rnux22b3");
		mysql_select_db("my118427");
		$res = mysql_query("SELECT distinct carburant FROM voiture 
			WHERE marque='".$_POST["marque"]."' and categorie='".$_POST["categorie"]."' ORDER BY carburant");
		while($row = mysql_fetch_assoc($res)){
			echo "<option value='".$row["carburant"]."'>".$row["carburant"]."</option>";
		}
	}
	echo "</select>";
?>

ajaxmarque.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
 
<?php
 
	echo "<select name='sel_cat' id='categorie' onchange='gocat()'  >";
	if(isset($_POST["marque"])){
		mysql_connect("mysql12.host7x24.com", "my118427","rnux22b3");
		mysql_select_db("my118427");
		$res = mysql_query("SELECT distinct categorie FROM voiture 
			WHERE marque='".$_POST["marque"]."' ORDER BY categorie");
		while($row = mysql_fetch_assoc($res)){
			echo "<option value='".$row["categorie"]."'>".$row["categorie"]."</option>";
		}
	}
	echo "</select>";
?>

Voila merci^^

**rawsrc** · 08/03/2012, 10h40

Je l'ai parcouru rapidement, mais je pense que ton problème vient du fait que ton code html est très mal formé. Il y a pas mal d'erreurs et le navigateur du coup ne sait pas quoi faire donc il ne fait rien.
Les versions modernes des navigateurs s'en sortent pas trop mal quand il s'agit de corriger des erreurs de code HMTL mais il y a quand même des limites et si ton formulaire ne fait rein, c'est que t'as dépassé les limites

Vu que tu as défini du CSS dans le head, pourquoi ne pas avoir entièrement séparé la mise ne forme des données pour toute la page ? Il n'est jamais bon de traîner des tags liés à la mise en forme.
Reprends soigneusement ton html. Présentes proprement le code avec une bonne indentation... et tu verras les erreurs te sauter aux yeux.
Le JS est bon, pas d'erreurs de ce côté.

**andry.aime** · 08/03/2012, 10h47

Atention
dans ton html

et dans ton php

echo "<select name='sel_cab' id='carburant' >";

**hotwheals** · 08/03/2012, 10h49

tu fais allusion a tout les <font> ,<strong> qui traine un peu partout je suppose?

je dois avouer que c'est a moitié de moi ce code en fait c'est du recyclage de lancien site^^

**andry.aime** · 08/03/2012, 10h51

Il en est de même pour categorie

sel = document.getElementById('categorie');

Fait bien attention car tes erreurs sont là.

**hotwheals** · 08/03/2012, 12h10

J'avance , j'avance grace a vous

donc voila j'ai changer 2 3 truc

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
 
			function gocat(){
				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('carburant').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajaxcat.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('cat');
				cat = sel.options[sel.selectedIndex].value;
				sel2 = document.getElementById('marque');
				marque = sel2.options[sel2.selectedIndex].value;
				xhr.send("cat="+categorie+"&marque="+marque);
			}

Code :

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

1
2
3
4
5
6
7
 
<label>categorie</label>
				<div style='display:inline' id='categorie'>
				<select name='sel_cat' id='cat' >
					<option value='-1'>Choisir une categorie</option>
				</select>
				</div>

Code :

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

1
2
3
4
5
6
7
 
<label>categorie</label>
				<div style='display:inline' id='categorie'>
				<select name='sel_cat' id='cat' >
					<option value='-1'>Choisir une categorie</option>
				</select>
				</div>

Voila donc la la troisieme colonne réagi mais elle n'affiche rien (ca je pense pouvoir y remédier facilement mais le problème c'est que quand je choisi la première liste et que ca me ressort qu'un résultat dans la deuxieme si je clique sur ce seul résultat la troisième liste ne réagi pas est-ce du au onchange() qui oblige l'utilisateur à changer son choix ou autre ?

**andry.aime** · 08/03/2012, 12h45

Envoyé par hotwheals

Voila donc la la troisieme colonne réagi mais elle n'affiche rien (ca je pense pouvoir y remédier facilement mais le problème c'est que quand je choisi la première liste et que ca me ressort qu'un résultat dans la deuxieme si je clique sur ce seul résultat la troisième liste ne réagi pas est-ce du au onchange() qui oblige l'utilisateur à changer son choix ou autre ?

Oui, le onchange ne réagit que si tu changes la valeur du select. ajoute une option vide au-debut de ton 2ème select.

A+.

**hotwheals** · 08/03/2012, 15h17

Bon merci à tous ça marche!
Mais il y a un mais >< désolé je sens que vous commencez à perdre patience

Mais j'aimerais savoir si il ya possibilité d'arranger l'affichage enfin je m'explique les requête envoyés par les listes renvois des valeur avec des accents (genre: catégorie coupé) et quand je choisis cette otion ca me rabat la liste des carburant car visiblement il ne comprend pas la demande><
Connaitriez vous un moyen de faire accepter les accents ou il serait plus judicieux que j'enleve les accents dans la base de donné ou que je les remplace par des équivalents genre eacute ou des trucs dans le genre?

**andry.aime** · 08/03/2012, 15h47

Utilise htmlentities.

A+.

**hotwheals** · 08/03/2012, 15h56

Merci encore Andry et merci a tout les autres je vais mettre en résolu en espérant que mon problème aura réussi à éclairer d'autre personne au passage Merci

**hotwheals** · 08/03/2012, 17h58

Désolé j'avais dis que je le mettrais en résolu mais en fait on le place comment le htmlentities? dans le value du select ? on fait une nouvelle variable en utilisant l'ancienne dans le htmlentities? franchement j'ai regarder sur le net j'ai pas trouver d'aide concrete et surtout correspondante à mon problème.

Merci d'avance

**andry.aime** · 09/03/2012, 04h25

Bonjour,

Je te conseille de reconstituer la structure de ta base. C'est à dire, utiliser un entier comme clé primaire et l'utiliser comme value des options.

Code :

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

echo "<option value='".$row["id_carburant"]."'>".htmlentities($row["carburant"])."</option>";

A+.

**hotwheals** · 09/03/2012, 11h36

Han

Tu es mon dieux Andri Mille Merciiiiii!

Formulaire "conditionnel" ? [MySQL]

PHP & Base de données

Discussions similaires

Partager

Partager