[AJAX] 2 select Onchange ajax

Version imprimable

Bonjour,
j'ai un projet de fin d'etude un site web en cour de realisation ,dans la partie administration de ce site dans l'un de ces page je veut afficher 2 select dynamique liee dans l'un qui contient la liste des filiere sporitve(volley ball,judo,foot ball) affichee de la table filiere et l'autre la liste des categorie(minim,cadee,junior,senior) selon le choix de la filiere de la table categorie pour afficher enfin les joueur ou l'entrenneur de cette categorie.
je developpe avec php et sql.

-- Structure de la table `filiere`
--

Code:

1
2
3
4
5
6
CREATE TABLE `filiere` ( 
`idfil` int(3) NOT NULL auto_increment, 
`typefil` varchar(30) NOT NULL, 
PRIMARY KEY (`idfil`), 
UNIQUE KEY `typefil` (`typefil`) 
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=116 ;

-- Structure de la table `galerie`
--

Code:

1
2
3
4
5
6
CREATE TABLE `categorie` (
  `idcat` int(3) NOT NULL auto_increment,
  `nomcat` varchar(30) NOT NULL,
  `typefil` varchar(30) NOT NULL,
  PRIMARY KEY  (`idcat`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=42 ;

--

j'ai suivit un tutorial sur le net mais malheureusement j'ai pas reussi a faire cette astuce car je ne maitrise pas bien la technologie ajax.
voici le code de deux page .php

select.php

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
<html> 
<head> 
<title>liste</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('categorie').innerHTML = 
leselect; 
} 
} 
// Ici on va voir comment faire du post 
xhr.open("POST","ajax.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('filiere'); 
filiere = sel.options[sel.selectedIndex].value; 
xhr.send("filiere="+filiere); 
} 
</script> 
</head> 
<body> 
<form > 
 
 
 
<fieldset style="width: 500px"> 
<legend>Liste liées</legend> 
<label>Auteurs</label> 
<select name="filiere" id="filiere" onchange="go()"> 
<option value='-1'>Aucun</option> 
<?php 
$typefil=$_POST['filiere']; 
mysql_connect("localhost","root",""); 
mysql_select_db("asptt"); 
$res = mysql_query("SELECT * FROM filiere "); 
while($row = mysql_fetch_assoc($res)){?> 
<option ><?php echo $row['typefil']; ?></option><?php }?>	
 
</select> 
<label>categorie</label> 
<div id="categorie"> 
<select name="categorie"> 
<option value="-1">Choisir une filiere</option> 
</select> 
</div> 
</fieldset> 
</form> 
</body> 
</html>

ajax.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php 
echo "<select name='categorie' id='categorie'>"; 
if(isset($idfil)) 
{ 
mysql_connect("localhost","root",""); 
mysql_select_db("asptt"); 
$res = mysql_query("SELECT idcat,nomcat FROM categorie 
WHERE typefil='$filiere'")or die(mysql_error()); 
while($row = mysql_fetch_assoc($res)){?> 
 
<option value="<?php echo $row['idcat'] ;?>"><?php echo $row['nomcat'];?></option> 
<?php } 
} 
echo "</select>"; 
?>

s'il y a quelqu'un qui peut m'aider et merci d'avance.

Salut,
tu postes xhr.send("filiere="+filiere); la variable filiere alors que tu ne le récupère pas dans ajax.php.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
if(isset($_POST['filiere']))
{$filiere=$_POST['filiere'];
mysql_connect("localhost","root",""); 
mysql_select_db("asptt"); 
$res = mysql_query("SELECT idcat,nomcat FROM categorie 
WHERE typefil='$filiere'")or die(mysql_error()); 
while($row = mysql_fetch_assoc($res)){?> 
 
<option value="<?php echo $row['idcat'] ;?>"><?php echo $row['nomcat'];?></option> 
<?php } 
} 
echo "</select>"; 
?>

10/04/2009, 14h09
mohsen01

pardent mais ca marche pas,est ce que tu as d'autre solution et merci d'avance.
10/04/2009, 14h46
andry.aime

Les options n'ont pas de value

Code:

<option value="<?php echo $row['typefil']; ?>"><?php echo $row['typefil']; ?></option>
10/04/2009, 22h43
mohsen01

slt
mon ami andry.aime merci pour ton effort et ton aide ,mais malheureusement ca marche pas.je sait pas c'est quoi le probleme,est ce que tu peut faire une autre verification de mon code ou si tu as une autre solution car je suis bloqué j'ai rien a faire car franchement je ne maitrise pas la technologie ajax.
merci d'avance.
cordialement.

Salut, tu n'as pas ouvert la balise <select>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<?php if(isset($_POST['filiere']))
{$filiere=$_POST['filiere'];
mysql_connect("localhost","root",""); 
mysql_select_db("asptt"); 
$res = mysql_query("SELECT idcat,nomcat FROM categorie 
WHERE typefil='$filiere'")or die(mysql_error()); 
echo '<select id="IdSelect">';
while($row = mysql_fetch_assoc($res)){?> 
 
<option value="<?php echo $row['idcat'] ;?>"><?php echo $row['nomcat'];?></option> 
<?php } 
} 
echo "</select>"; 
?>

11/04/2009, 13h01
mohsen01

slt,la balise <select> est ouvert dans le 1er fichier select.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<select name="filiere" id="filiere" onchange="go()"> 
<option value='-1'>Aucun</option> 
<?php 
mysql_connect("localhost","root",""); 
mysql_select_db("asptt"); 
$res = mysql_query("SELECT * FROM filiere "); 
while($row = mysql_fetch_assoc($res)){
echo '<option value="'.$row['typefil'].'">'.$row['typefil'].'</option>';}?>	
</select> 
<label>categorie</label> 
<div id="categorie"> 
<select name="categorie"> 
<option value="-1">Choisir une filiere</option> 
</select>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php if(isset($_POST['filiere']))
{$filiere=$_POST['filiere'];
mysql_connect("localhost","root",""); 
mysql_select_db("asptt"); 
$res = mysql_query("SELECT idcat,nomcat FROM categorie 
WHERE typefil='$filiere'")or die(mysql_error()); 
echo '<select name="categorie">';
while($row = mysql_fetch_assoc($res)){ 
 echo '<option value="'.$row["idcat"]. '">'.$row["nomcat"].'</option>';
 }
echo "</select>";
} 
 
?>

Vérifie la valeur de value que j'ai entré

Citation:

echo '<option value="'.$row['typefil'].'">'.$row['typefil'].'</option>'

11/04/2009, 14h27
mohsen01

salut mon ami,j'ai remplacer ton code dans mon code mais n'a rien changer,je sait pas c'est quoi le problem.:cry:
merci d'avance pour l'aide.
11/04/2009, 15h55
boucamleg

Question

Pourquoi avoir poster la structure de la table "galerie" alors que tu fais appel à la table "catégorie" dans ta page ajax.php ?

boucamleg
11/04/2009, 23h01
mohsen01

:oops: je suis tromper ,j'ai corriger le faute de frappe.
merci d'avance pour m'aider.
12/04/2009, 19h21
boucamleg

Utilises-tu Internet Explorer ou Firefox ?

boucamleg
13/04/2009, 22h52
mohsen01

j'utilise google chrome et firefox
14/04/2009, 07h25
andry.aime

Installe Firebug ensuite décrit les erreurs.
25/04/2009, 17h04
mohsen01

merci a tous,mon probleme a etait resolu.:yaisse2:
29/04/2009, 12h07
houssam_88

salut!
peux tu tu nous dire qu'elle etait ta faute stp!

mon ami Houssem_88 j'ai laisser ce script a coté et j'ai chercher un autre code sur le net et j'ai trouver ceci :

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
<html>
 
<head>
<title>Créer par Frop01 (Membre du Club CodeS-Source.com)</title>
<script>
List = new Array();
function Remplir(valeur){
  var sel="";
  sel ="<select size='1' name='souscat'>";
  // Parcourir le tableau
  for (var i=0;i<List.length;i++)
   {
     // tester si la ligne du tableau (Sous-catégorie) correspond à la valeur de la catéhorie
     if (List[i][1]==valeur)
     {
       // Ajouter une rubrique sous-catégorie au variable SEL
       sel= sel + "<option value="+List[i][0]+">"+List[i][2]+"</option>";
     }
 
   }
   sel =sel + "</select>";
   // Modifier le DIV scat par la nouvelle List à partir du variable SEL
   document.getElementById('scat').innerHTML=sel;
}
</script>
</head>
<body>
 
<form method="POST" action="Ajout6.php3">
  <select size="1" name="cat" OnChange="Remplir(cat.value)">
<?php
// Paramètres de la Connexion à la base MYSQL
$user="root";
$host="localhost";
$password="";
$database="essai";
$i=0; // variable de test
$j=0; // variable pour garder la valeur du premier enregistrement catégorie pour l'affichage
 
$connexion = mysql_connect($host,$user,$password) or die ("Connexion au serveur impossible");
 
mysql_select_db($database,$connexion);
 
// Séléction de tous les enregistrements de la table Catégorie
$rq="Select * from categorie order by designation;";
$result= mysql_query ($rq) or die ("Select impossible");
 
while ($dt=mysql_fetch_row($result))
{
 // Remplir la liste déroulante des catégorie
 echo "\t\t<option value=".($dt[0]).">".($dt[1])."</option>";
 if ($i==0) { $j=$dt[0]; $i=1; } // garder la valeur du premier enregistrement
}
 
?>
 
</select><br><br>
 
<DIV id="scat">
<select size="1" name="souscat">
</select>
</DIV>
 
<?php
 
// Séléction de tous les enregistrements de la table Sous-Catégorie
$rq="Select * from sous_categorie order by designation;";
$result= mysql_query ($rq) or die ("Select impossible");
// $i = initialise le variable i
$i=0;
while ($dt=mysql_fetch_row($result))
{
 // Remplir le tableau (array) en javascript
 // ex : List[1]=new Array (1,1,"Sous-catégorie 1");
 // ex : List[2]=new Array (2,1,"Sous-catégorie 2");
 echo "<script>List[".$i."] = new Array(".($dt[0]).",".($dt[1]).",'".($dt[2])."');</script>";
 $i=$i+1; // Incrémentation de $i
}
echo "<script>Remplir ($j); </script>"; // Remplir la deuxième liste de choix avec les données
                                        // des sous-catégories en utilisant la valeur j
?>
<br><br>
  <input type="submit" name="Send" value="Envoyer">
</form>
 
</body>
 
</html>

alors ,il faut que tu change les paramatres de la connexion a ta base ensuite changer les 2 requetes sql selon vos besoin et ca marche.:yaisse2:
cette astuce m'a servit beacoup dans mon projet.
j'ai pas compris completement le code mais j'ai remplacer des bout de code et ca roule :king: parceque je suis debutant en javascript et null en Ajax :cry:
j'espere que ca peut t'aider et si tu as rencontrer un probleme n'hesiter pas a le poser.
bon developpement.

eeuuh pour la base sql j'ai oublier de le mettre

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
 
# Base de données: `essai`
#
 
# --------------------------------------------------------
 
#
# Structure de la table `categorie`
#
 
CREATE TABLE `categorie` (
`id_cat` int(5) NOT NULL auto_increment,
`designation` varchar(50) NOT NULL default '',
`comment` varchar(255) NOT NULL default '',
PRIMARY KEY (`id_cat`),
UNIQUE KEY `designation` (`designation`)
) TYPE=MyISAM AUTO_INCREMENT=9 ;
 
#
# Contenu de la table `categorie`
#
 
INSERT INTO `categorie` VALUES (1, 'Ressources Webmaster', 'Site dédié aux webmasters. Tutorials, Exemples, Codes Sources, ressources, images, Cliparts, Gifs, Forums ...');
INSERT INTO `categorie` VALUES (2, 'Downloads', 'Téléchargement freeware, shareware...');
INSERT INTO `categorie` VALUES (3, 'Programmation', 'Developpement programmation');
 
# --------------------------------------------------------
 
#
# Structure de la table `sous_categorie`
#
 
CREATE TABLE `sous_categorie` (
`id_scat` int(5) NOT NULL auto_increment,
`idcat` int(5) NOT NULL default '0',
`designation` varchar(50) NOT NULL default '',
`comment` varchar(255) NOT NULL default '',
PRIMARY KEY (`id_scat`),
UNIQUE KEY `designation` (`designation`)
) TYPE=MyISAM AUTO_INCREMENT=9 ;
 
#
# Contenu de la table `sous_categorie`
#
 
INSERT INTO `sous_categorie` VALUES (5, 1, 'Php & Mysql', 'Forums, Tutorials, Codes Sources ..');
INSERT INTO `sous_categorie` VALUES (4, 3, 'Visual Basic', 'VB, VB.NET, Crystal Report, Access, SQL SERVER ..');
INSERT INTO `sous_categorie` VALUES (6, 1, 'Javascript', 'Tutorials pour javascript, Forums ...');
INSERT INTO `sous_categorie` VALUES (2, 1, 'Gifs animés, Icônes', 'Téléchargement gifs animés , clipart, Icones');
INSERT INTO `sous_categorie` VALUES (1, 1, 'Templates', 'Sites de téléchargement de modèles de site web');
INSERT INTO `sous_categorie` VALUES (3, 2, 'Pilotes', 'Drivers, pilotes, carte graphiques');
INSERT INTO `sous_categorie` VALUES (7, 2, 'Freeware, sharware', 'Freeware, sharware');
INSERT INTO `sous_categorie` VALUES (8, 3, 'SQL SERVER', 'Tutorials forum SQL SERVER');