Listes liées et action différente

**spawns** · 12/09/2013, 21h56

Salut à tous,
je suis en train de mettre en place un moteur de recherche avec des liste liée, et je rencontre un problème pour envoyer mon formulaire. je rame depuis plusieurs jours.
je ne suis pas un expert mais peut être pourrez vous m'aiguiller et m'aider.
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
 
$idr = isset($_POST['region'])?$_POST['region']:null;
$idr2 = isset($_POST['ville'])?$_POST['ville']:null;
 
 
?>
<form action="" method="post" id="chgreg">
			<table class="recherche" width="900"><tr>
				<td class="gauche" width="430">
				<label class="reche">Region :</label>				
<select name="region" id="region" onchange="document.forms['chgreg'].submit();">
  <option value="-1">- - - Choisissez une région - - -</option>
<?php
    $sql1 = "SELECT DISTINCT region FROM programme";
	$requ1 = mysql_query($sql1) or die('Erreur SQL !<br />'.$sql.'<br />'.mysql_error()); 
	while ($ligne = mysql_fetch_object($requ1)){
	?> <option value="<? echo($ligne->region); ?>"<? echo((isset($idr) && $idr == $ligne->region)?" selected=\"selected\"":null); ?>><? echo $ligne->region; ?></option>
	<?
	}
?>
</select><br /><br />
				<label class="reche">Ville :</label>				
<select name="ville" id="ville" onchange="document.forms['chgreg'].submit();">
  <option value="-1">- - - Choisissez une ville - - -</option>
<?php
    $sql2 = "SELECT DISTINCT ville FROM programme WHERE region='$idr'";
	$requ2 = mysql_query($sql2) or die('Erreur SQL !<br />'.$sql.'<br />'.mysql_error()); 
 
	while ($ligne2 = mysql_fetch_object($requ2)){
	?> <option value="<? echo($ligne2->ville); ?>"<? echo((isset($idr2) && $idr2 == $ligne2->ville)?" selected=\"selected\"":null); ?>><? echo $ligne2->ville; ?></option>
	<?
	}?>
</td></tr></table>
<input type="submit" name="ok" id="ok" value="Rechercher" />
 
</form>

je n'ai rien mis dans le form action, car comme je me sert du onchange="document.forms['chgreg'].submit();" cela ne fonctionne pas.

ma question , comment faire pour conserver le rafraichissement des listes tout en envoyant le form vers une autre page par exemple action="resultats.php"

j’espère avoir été clair et que vous pourrez m'aider.

Merci d'avance

Invité · 12/09/2013, 22h35

Bonjour,
présentement, tu recharges la page (submit).

Le mieux est d'utiliser Ajax pour remplir la seconde liste après changement dans la première, sans rechargement de la page.

Fais une recherche sur : "listes liées Ajax"

**spawns** · 12/09/2013, 22h40

Merci, mais j'ai essayé ce tuto : http://siddh.developpez.com/articles/ajax/#LIV-A.
mais il ne fonctionne pas.

c'est pour cela que je cherche autre chose

Invité · 12/09/2013, 22h41

Il y a une différence entre

"il ne fonctionne pas"

et

"je n'ai pas su le faire fonctionner"

.

**spawns** · 12/09/2013, 22h49

ok,
je n'ai pas pu le faire fonctionner.

Mais cela ne m'aide pas beaucoup...

Invité · 12/09/2013, 22h55

Non. Mais les exercices simples proposés dans le tuto, oui.

Qui plus est, "il ne fonctionne pas" n'est pas un message d'erreur, et n'aide donc pas non plus.

**spawns** · 12/09/2013, 23h01

bon ben OK

je vais essayé de me débrouiller, à moins que quelqu’un d'autre puisse m'aider dans mon code...

Invité · 12/09/2013, 23h05

Ajax EST la solution à ton problème.

C'est un peu rébarbatif au début, mais pour peu qu'on suive les exercices, au final, ce n'est pas très compliqué.

1/ 1ère liste (select) : onchange -> appel d'une fonction JavaScript
2/ cette fonction envoie des paramètres à un fichier PHP, qui s'occupe d la requête et affichage du 2ème select
3/ la réponse est renvoyé à la fonction JavaScript, qui l'inclus (.innerHTML) dans le code HTML.

Ne pas comprendre n'est pas un mal en soi.

Abandonner dès la première difficulté est déjà moins glorieux.

**spawns** · 12/09/2013, 23h20

j'ai essayé mais je ne connais rien en ajax.
de plus je dois le faire sur une seule bdd
style :
ID|nom|ville|region|...

cela rempli bien la première liste mais pas la seconde.

voici le code que j'ai essayé d'adapter :

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
$db = mysql_connect($cfgHote, $cfgLogin, $cfgPwd);
mysql_select_db($cfgBase,$db);
 
?>
		<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('ville').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","fonc.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('ville');
				idauteur = sel.options[sel.selectedIndex].value;
				xhr.send("idAuteur="+idauteur);
			}
		</script>
	</head>
	<body>
		<form>
			<fieldset style="width: 500px">
				<legend>Liste liées</legend>
				<label>Région</label>
				<select name='region' id='region' onchange='go()'>
					<option value='-1'>Aucun</option>
					<?
 
						$res = mysql_query("SELECT DISTINCT region FROM programme");
						while($row = mysql_fetch_assoc($res)){
							echo "<option value='".$row["region"]."'>".$row["region"]."</option>";
						}
					?>
				</select>
				<label>Ville</label>
				<div id='ville' style='display:inline'>
				<select name='ville'>
					<option value='-1'>Choisir une ville</option>
				</select>
				</div>
			</fieldset>
		</form>

second page :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<?php
	echo "<select name='ville'>";
	if(isset($_POST["region"])){
$db = mysql_connect($cfgHote, $cfgLogin, $cfgPwd);
mysql_select_db($cfgBase,$db);
		$res = mysql_query("SELECT * FROM programme 
			WHERE region=".$_POST["region"]."");
		while($row = mysql_fetch_assoc($res)){
			echo "<option value='".$row["ville"]."'>".$row["ville"]."</option>";
		}
	}
	echo "</select>";
?>

comme je le dis comme je connais pas grand chose en ajax j'ai du mal a trouver ou est le probleme.

Invité · 12/09/2013, 23h28

Le go() est sur le 1er select :

Code :

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

				<select name='region' id='region' onchange='go()'>

C'est donc l'id region qu'on va transsmettre au fichier fonc.php :

Code :

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

1
2
3
4
				// ici, l'id de la region
				sel = document.getElementById('region');
				region = sel.options[sel.selectedIndex].value;
				xhr.send("region="+region);

Une autre façon de faire :

Code :

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

				<select name='region' id='region' onchange='go(this.value);'>

et :

Code :

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

1
2
3
4
			function go(idregion){
....
				// ici, l'id de la region
				xhr.send("region="+idregion);

**spawns** · 12/09/2013, 23h35

Cela ne fonctionne pas non plus

j'ai l'impression que cela ne transmet pas le

Code :

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

$_POST["region"]

à la page fonc.php

Invité · 12/09/2013, 23h39

Envoyé par spawns

Cela ne fonctionne pas non plus

Ce n'est toujours pas un message d'erreur... exploitable.

Essaie de mettre des alert('ok'); ou alert(idregion); dans le code.
Qu'on voit où ça bloque.

+ teste avec seulement dans le fichier PHP :

Code :

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

1
2
3
4
5
<?php
header('Content-type: text/HTML; charset=UTF-8'); // A AJOUTER !
 
echo 'idregion = '.$_POST['region'];
?>

**spawns** · 12/09/2013, 23h44

je te remet le code ou j'en suis avec les modifs

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
 
		<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('ville').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","fonc.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('region');
				region = sel.options[sel.selectedIndex].value;
				xhr.send("region="+region);
			}
		</script>
	</head>
	<body>
		<form>
			<fieldset style="width: 500px">
				<legend>Liste liées</legend>
				<label>Région</label>
				<select name='region' id='region' onchange='go()'>
					<option value='-1'>Aucun</option>
					<?
 
						$res = mysql_query("SELECT DISTINCT region FROM programme");
						while($row = mysql_fetch_assoc($res)){
							echo "<option value='".$row["region"]."'>".$row["region"]."</option>";
						}
					?>
				</select>
				<label>Ville</label>
				<div id='ville' style='display:inline'>
				<select name='ville'>
					<option value='-1'>Choisir une ville</option>
				</select>
				</div>
			</fieldset>
		</form>

Page fonc.php

Code :

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

1
2
3
4
5
<?php
header('Content-type: text/HTML; charset=UTF-8'); // A AJOUTER !
 
echo 'idregion = '.$_POST['region'];
?>

a quel endroit dois je placer les alerte ?

Invité · 12/09/2013, 23h48

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
function go(){
				var xhr = getXhr();
alert('go !');
				// 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;
alert('leselect : '+leselect);
						// On se sert de innerHTML pour rajouter les options a la liste
						document.getElementById('ville').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","fonc.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('region');
				region = sel.options[sel.selectedIndex].value;
alert('region : '+region);
				xhr.send("region="+region);

**spawns** · 12/09/2013, 23h51

les deux premières alertes fonctionnent
alert 1 : go
alert 2 : region :auqitaine

pas la troisième

Invité · 12/09/2013, 23h57

Pourtant, ceci fonctionne très bien (testé) :

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
<!DOCTYPE html>
<html>
<head>
	<meta content="text/html; charset=utf-8" http-equiv="content-type">
	<title></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 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('ville').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","fonc.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 région
				sel = document.getElementById('region');
				region = sel.options[sel.selectedIndex].value;
				xhr.send("region="+region);
			}
		</script>
	</head>
	<body>
		<form>
			<fieldset style="width: 500px">
				<legend>Liste liées</legend>
				<label>Région</label>
				<select name='region' id='region' onchange='go();'>
					<option value='-1'>Aucun</option>
					<option value='nord'>nord</option>
					<option value='p-d-c'>p-d-c</option>
				</select>
				<label>Ville</label>
				<div id='ville' style='display:inline'>
				<select name='ville'>
					<option value='-1'>Choisir une ville</option>
				</select>
				</div>
			</fieldset>
		</form>
 
</body>
</html>

fonc.php :

Code :

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

1
2
3
4
5
<?php
header('Content-type: text/HTML; charset=UTF-8'); // A AJOUTER !
 
echo 'idregion = '.$_POST['region'];
?>

[Edit] as-tu d'autres scripts dans ta page ??

**spawns** · 13/09/2013, 00h00

oui le menu région se rempli bien, mais cela ne remplie pas le menu déroulant ville

Invité · 13/09/2013, 00h01

N.B. Normal qu'il ne remplisse pas la 2ème liste : on lui demande juste d'afficher

Code :

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

echo 'idregion = '.$_POST['region'];

Ca affiche ça OU PAS ?

Ville idregion = aquitaine

N.B. Mets-y un peu de bonne volonté : je ne vais pas y passer la nuit...

**spawns** · 13/09/2013, 00h11

j'ai vérifié et finalement cela fonctionne en parti. car mon fichier est inclus
dans une autre page et je pense que le problème vient de la (un blem de header je pense).

par contre lorsque je remet le fonc.php complet j'ai une erreur

Code :

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

1
2
3
leselect : <select name='ville'>
Warning: mysql_fetch_assoc() expects parameter 1 to be resource, boolean given in /../fonc.php on line 15
</select>

Invité · 13/09/2013, 00h17

Et la ligne 15 est... ?

Tu nous remets le code complet du fichier func.php ? Merci.

Listes liées et action différente

Langage PHP

Discussions similaires

Partager

Partager