3 listes liées entres elles

Version imprimable

1 pièce(s) jointe(s)

bonjour,
je ne sais pas si je suis au bon endroit ,
je suis débutante et j'aimerai créer des listes liées pour mon formulaire
j'ai trouvé un tuto avec deux qui fonctionnes , mais lorsque je fais une troisième plus rien ne va
tous reste blanc et rien ne s'affiche
si vous pouvez m'aider et voir pourquoi cela ne va pas
merci beaucoup

voici ma base de donnee:

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
Base de données :  `test`
--
 
-- --------------------------------------------------------
 
--
-- Structure de la table `auteur`
--
 
DROP TABLE IF EXISTS `auteur`;
CREATE TABLE IF NOT EXISTS `auteur` (
  `id` tinyint(4) NOT NULL AUTO_INCREMENT,
  `nom` varchar(50) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=5 DEFAULT CHARSET=latin1;
 
--
-- Déchargement des données de la table `auteur`
--
 
INSERT INTO `auteur` (`id`, `nom`) VALUES
(1, 'Clive Cussler'),
(2, 'Harlan Coben'),
(3, 'Franck Herbert'),
(4, 'Pierre Bordages');
 
-- --------------------------------------------------------
 
--
-- Structure de la table `editeur`
--
 
DROP TABLE IF EXISTS `editeur`;
CREATE TABLE IF NOT EXISTS `editeur` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `nom` varchar(255) NOT NULL,
  `idLivre` int(11) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=11 DEFAULT CHARSET=latin1;
 
--
-- Déchargement des données de la table `editeur`
--
 
INSERT INTO `editeur` (`id`, `nom`, `idLivre`) VALUES
(1, 'Toto', 4),
(2, 'Zouzou', 3),
(3, 'titi', 1),
(4, 'tata', 2),
(5, 'tutu', 5),
(6, 'jojo', 6),
(7, 'juju', 7),
(8, 'momo', 8),
(9, 'mumu', 9),
(10, 'tutu', 10);
 
-- --------------------------------------------------------
 
--
-- Structure de la table `livre`
--
 
DROP TABLE IF EXISTS `livre`;
CREATE TABLE IF NOT EXISTS `livre` (
  `id` tinyint(4) NOT NULL AUTO_INCREMENT,
  `titre` varchar(255) NOT NULL,
  `idAuteur` tinyint(4) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=12 DEFAULT CHARSET=latin1;
 
--
-- Déchargement des données de la table `livre`
--
 
INSERT INTO `livre` (`id`, `titre`, `idAuteur`) VALUES
(1, 'Odyssee', 1),
(2, 'Sahara', 1),
(3, 'Dragon', 1),
(4, 'Une chance de trop', 2),
(5, 'Ne le dis a personne', 2),
(6, 'Disparu à jamais', 2),
(7, 'Dune', 3),
(8, 'La barriere de santaroga', 3),
(9, 'Les guerriers du silence', 4),
(10, 'La citadelle hyponeros', 4),
(11, 'Terra mater', 4);
COMMIT;

mon fichier auteur.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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<html>
<head>
 <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 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('livre').innerHTML = leselect;
   	}
   }
   // Ici on va voir comment faire du post
   xhr.open("POST","ajaxLivre1.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('auteur');
   idauteur = sel.options[sel.selectedIndex].value;
   xhr.send("idAuteur="+idauteur);
 	}
     function go_duree(){
				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('editeur').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","Ajaxediteur1.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('livre');
				idesp = sel.options[sel.selectedIndex].value;
				xhr.send("idlivre="+idlivre);
 </script>
</head>
<body>
 <form>
 	<fieldset style="width: 500px">
   <legend>Liste liées</legend>
   <label>Auteurs</label>
   <select name='auteur' id='auteur' onchange='go()'>
   	<option value='-1'>Aucun</option>
   	<?php
     mysql_connect("localhost","root","" );
     mysql_select_db("test" );
     $res = mysql_query("SELECT * FROM auteur ORDER BY nom" );
     while($row = mysql_fetch_assoc($res)){
     	echo "<option value='".$row["id"]."'>".$row["nom"]."</option>";
     }
   	?>
   </select>
   <label>Livres</label>
   <div id='livre' style='display:inline'>
   <select name='livre'>
   	<option value='-1'>Choisir un auteur</option>
   </select>
   </div>
   <label>Duree</label>
				<div id='editeur' style='display:inline'>
				<select name='editeur'>
					<option value='-1'>Choisir une dur&eacute;e</option>
				</select>
				</div>
 	</fieldset>
 </form>
</body>
</html>

ajaxlivre.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
echo "<select name='livre onchange='go_duree()'>";
if(isset($_POST["idAuteur"])){
 mysql_connect("localhost","root","" );
 mysql_select_db("test" );
 $res = mysql_query("SELECT id,titre FROM livre
 	WHERE idAuteur=".$_POST["idAuteur"]." ORDER BY titre" );
 while($row = mysql_fetch_assoc($res)){
 	echo "<option value='".$row["id"]."'>".$row["titre"]."</option>";
 }
}
echo "</select>";
 
?>

editeur.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
echo "<select name='editeur '>";
if(isset($_POST["idLivre"])){
 mysql_connect("localhost","root","" );
 mysql_select_db("test" );
 $res = mysql_query("SELECT id,nom FROM editeur
 	WHERE idLivre=".$_POST["idLivre"]." ORDER BY nom" );
 while($row = mysql_fetch_assoc($res)){
 	echo "<option value='".$row["id"]."'>".$row["nom"]."</option>";
 }
}
echo "</select>";
?>

merci beaucoup pour votre aide

18/09/2017, 15h27
NoSmoking

Bonjour,
as-tu regardé Créer des listes déroulantes liées entre elles sans utiliser Ajax, cela pourrait répondre à ton attente !
18/09/2017, 17h58
bganata

merci,
je vais tester cette méthode,
mais j'ai beaucoup de données à utiliser

merci

Tu peux aussi utiliser ajax avec jquery ce qui est bien plus simple qu'avec l'ajax javascript.
J'ai utilisé tes données. Bien entendu les paramètres de connexion à la bdd doivent être changés.

Une chose. Il faudrait que tu aies une table des éditeurs (id, nom) et modifier la table editeur en editeur_livre (id_editeur, id_livre) pour que le modèle soit correct.

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
 
<!DOCTYPE html>
<?php
$bdd = new PDO('mysql:host=127.0.0.1; dbname=tests','root','', array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,PDO::MYSQL_ATTR_LOCAL_INFILE => true));
//------ Lista degli eventi
$query  = "SELECT id, nom FROM auteur order by nom";
$sth    = $bdd->prepare($query);
$sth->execute();?>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<style type="text/css">
</style>
<script>
function livres(valeur)
{
 document.getElementById("div_livres").innerHTML  = '';
 document.getElementById("div_editeur").innerHTML = '';
 
 if (valeur != "x") 
 {
  $.ajax
  ({            
   type: "POST",            
   url: "test9372_livres.php",            
   data: {id: valeur},            
   dataType: "html",            
   success: function(donnees){    
    $("#div_livres").html(donnees);
    return;    
   },
   error:function(msg){
    alert('Erreur : '+msg);
   }
  }); 
 }
 return; 
}
function editeur(valeur)
{
 document.getElementById("div_editeur").innerHTML = '';
 
 if (valeur != "x") 
 {
  $.ajax
  ({            
   type: "POST",            
   url: "test9372_editeur.php",            
   data: {id: valeur},            
   dataType: "html",            
   success: function(donnees){    
    $("#div_editeur").html(donnees);
    return;    
   },
   error:function(msg){
    alert('Erreur : '+msg);
   }
  }); 
 }
 return; 
}
</script>
</head>
<body>
<table>
 <tr>
  <td>Auteurs</td>
  <td>
   <select id="auteur" onchange="livres(this.value)">
    <option value="x">Sélectionnez une valeur</option><?php
   while (list($id,$nom) = $sth->fetch(PDO::FETCH_NUM)) 
   {?>
    <option value="<?php print $id;?>"><?php print $nom;?></option><?php
   }?>
   </select>  
  </td>  
 </tr>
 <tr>
  <td>Livres</td>
  <td><div id="div_livres"></div></td>  
 </tr>
 
 <tr>
  <td>Editeur</td>
  <td><div id="div_editeur"></div></td>  
 </tr> 
</table>
</body>
</html>

test9372_livres.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<?php
$bdd = new PDO('mysql:host=127.0.0.1; dbname=tests','root','', array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,PDO::MYSQL_ATTR_LOCAL_INFILE => true));
//---- ATTENTION - JE NE TESTE PAS LA VALIDITE DE LA VALEUR
$idauteur = $_POST['id'];
//------ Liste des livres
$query  = "SELECT id, titre FROM livre where idauteur = $idauteur order by titre";
$sth    = $bdd->prepare($query);
$sth->execute();?>
<select id="livre" onchange="editeur(this.value)">
<option value="x">Sélectionnez une valeur</option><?php
while (list($id,$titre) = $sth->fetch(PDO::FETCH_NUM)) 
{?>
 <option value="<?php print $id;?>"><?php print $titre;?></option><?php
}
?>
</select>

test9372_editeur.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<?php
$bdd = new PDO('mysql:host=127.0.0.1; dbname=tests','root','', array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,PDO::MYSQL_ATTR_LOCAL_INFILE => true));
//---- ATTENTION - JE NE TESTE PAS LA VALIDITE DE LA VALEUR
$idlivre = $_POST['id'];
//------ Liste des livres
$query  = "SELECT id, nom FROM editeur where idlivre = $idlivre order by nom";
$sth    = $bdd->prepare($query);
$sth->execute();?>
<select id="editeur">
<option value="x">Sélectionnez une valeur</option><?php
while (list($id,$nom) = $sth->fetch(PDO::FETCH_NUM)) 
{?>
 <option value="<?php print $id;?>"><?php print $nom;?></option><?php
}
?>
</select>

Citation:

Envoyé par badaze

Tu peux aussi utiliser ajax avec jquery ce qui est bien plus simple qu'avec l'ajax javascript.

Si c'est pour utiliser jQuery que pour faire une requête Ajax, comme c'est très souvent le cas, les moyens sont disproportionnés par rapport au besoin. Quant à l'utilisation d'Ajax en « vanilla » javascript elle n'a rien de bien compliqué et est réalisée en quelques lignes.

En voici une que j'ai de disponible (elle date un peu mais marche très bien)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 /** * Fonction qui charge des données via Ajax dans un élément * @param {String} url - url de la requête * @param {String} param - propriété du paramètre à passer * @param {String} id_valeur - id du <select> où l'on doit récupérer la valeur à passer * @param {String} id_destination - id du <select> dans lequel mettre la réponse */ function getAjaxData(url, param, id_valeur, id_destination) { var oXhr = window['XMLHttpRequest'] ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); var valeur = document.getElementById(id_valeur).value; var oDest = document.getElementById(id_destination); oXhr.onreadystatechange = function () { if (this.readyState === 4 && this.status === 200) { oDest.innerHTML = this.responseText; } } oXhr.open('POST', url, true); oXhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); oXhr.send(param + '=' + valeur); }
Nota : elle pourrait actuellement être simplifiée notamment avec onload.