[AJAX] Récupérer info d'un select dans un autre

Version imprimable

bonjour
je voudrais quand un utilisateur clic dans un select afficher un autre select avec l'info récupéré sur le 1er select $nom_categ en temp réel.
je pense que c'est avec du javascript qu'on peut faire ça, mais je ne connais pratiquement rien en javascript.
quelqu'un peut m'aider ?

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
<div class="bloccp">
 <select name="categrech" <?php if ($souscateg !='' AND $souscateg != 0) { echo 'style="background-color:#cad5d6"';} ?>  onchange="affichElement2( this.value)">
<option style="background-color:#fff" value="0" >Catégories</option>
 <?php
    $rec_categ = $bdd->query("SELECT DISTINCT categ FROM categorie where id != 1");
 
    while ($rec_catego = $rec_categ->fetch())
    {
    $id_categ = $rec_catego['id'];
    $nom_categ = $rec_catego['categ'];
    $sous_categorie = $rec_catego['sous_categ'];
 
    if ($categ == $nom_categ)
    {
    ?>
<option value="<?php echo $nom_categ;?>"  selected><?php echo $nom_categ;?></option>
 <?php
 }
 else
 {
?>
<option value="<?php echo $nom_categ;?>" ><?php echo $nom_categ;?></option>
 <?php
 }
 }
 ?>
 </select>
 </div>
 <div class="bloccp" id="souscateg" style="display:none;">
 <select name="souscategrech" <?php if ($categ !='' AND $categ != 0) { echo 'style="background-color:#cad5d6"';} ?>>
<option style="background-color:#fff" value="0" >Sous-Catégories</option>
 <?php
 
    $rec_scateg = $bdd->query("SELECT * FROM categorie where categ = '$nom_categ'");
    while ($rec_catego = $rec_scateg->fetch())
    {
    $id_categ = $rec_catego['id'];
    $nom_categ = $rec_catego['categ'];
    $sous_categorie = $rec_catego['sous_categ'];
 
    if ($souscategrech == $sous_categorie)
    {
    ?>
<option value="<?php echo $sous_categorie;?>"  selected><?php echo $sous_categorie;?></option>
 <?php
 }
 else
 {
?>
<option value="<?php echo $sous_categorie;?>" ><?php echo $sous_categorie;?></option>
 <?php
 }
 }
 ?>
 </select>
  </div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script type="text/javascript"> 
	function affichElement2(param) {
    var element  = param;    
 
    if (element  == "0") {
	//auto
        document.getElementById('souscateg').style.display='none';
       	document.getElementById('contenu2').style.display = 'inline';
	} 
	else if (element  != '0') {
        document.getElementById('souscateg').style.display='inline';
       	document.getElementById('contenu2').style.display = 'inline';
	}
}
 
 
</script>

25/08/2014, 16h51
SpaceFrog

si tu regardes juste au dessus de ton post il y a un post intitulé "select liés ou liste liées ..."
25/08/2014, 17h19
maxtrident

merci je vais regarder ça et revient si j'ai un problème.

bon j'ai une erreur Parse error: syntax error, unexpected $end quand je clic sur le 1er 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
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('souscateg').innerHTML = leselect;
		}
	}
	// Ici on va voir comment faire du post
	xhr.open("POST","souscateg.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'categrech
	sel = document.getElementById('categrech');
	idauteur = sel.options[sel.selectedIndex].value;
	xhr.send("idAuteur="+idauteur);
}

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
<div class="bloccp">
 
 <select name="categrech" id='categrech' <?php if ($categ !='' AND $categ != 0) { echo 'style="background-color:#cad5d6"';} ?>  onchange='go()'>
<option style="background-color:#fff" value="-1" >Catégories</option>
 <?php
	$rec_categ = $bdd->query("SELECT DISTINCT categ FROM categorie where id != 1  ORDER BY categ");
 
	while ($rec_catego = $rec_categ->fetch())
	{
	$id_categ = $rec_catego['id'];
	$nom_categ = $rec_catego['categ'];
	$sous_categorie = $rec_catego['sous_categ'];
 
	if ($categ == $nom_categ)
    {
    ?>
<option value="<?php echo $id_categ;?>"  selected><?php echo $nom_categ;?></option>
 <?php
 }
 else 
 {
?>
<option value="<?php echo $id_categ;?>" ><?php echo $nom_categ;?></option>
 <?php
 }
 }
 ?>
 </select>
 </div>
 <div class="bloccp" id="souscateg" style="display:none;">
 <select name="souscateg" <?php if ($souscategrech !='' AND $souscategrech != 0) { echo 'style="background-color:#cad5d6"';} ?>>
<option style="background-color:#fff" value="-1" >Sous-Catégories</option>
  </select>
  </div>
   </div>

fichier souscateg.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
<?php
// Fichier de configuration
include "./../config.php";
// Connection MYSQL
try
{
    // On se connecte à MySQL
   $bdd = new PDO('mysql:host='.$sql.';dbname='.$base.';charset=utf8', $user, $password);
   }
catch(Exception $e)
{
    // En cas d'erreur, on affiche un message et on arrête tout
        die('Erreur : '.$e->getMessage());
}
 
unset($sql);
unset($user);
unset($password);
unset($base);
 
?>
 <select name="souscateg" <?php if ($categ !='' AND $categ != 0) { echo 'style="background-color:#cad5d6"';} ?>>
 <?php
 if(isset($_POST["idAuteur"])){
	$rec_scateg = $bdd->query("SELECT * FROM categorie where id = ".$_POST["idAuteur"]." ORDER BY sous_categ");
	while ($rec_catego = $rec_scateg->fetch())
	{
	$id_categ = $rec_catego['id'];
	$nom_categ = $rec_catego['categ'];
	$sous_categorie = $rec_catego['sous_categ'];
 
	if ($souscategrech == $sous_categorie)
    {
    ?>
<option value="<?php echo $id_categ;?>"  selected><?php echo $sous_categorie;?></option>
 <?php
 }
 else 
 {
?>
<option value="<?php echo $id_categ;?>" ><?php echo $sous_categorie;?></option>
 <?php
 }
 }}
?>
</select>

si quelqu'un voie erreur ?

26/08/2014, 11h37
BakSh0

Bonjour,

Je ne sais pas si ça à un rapport avec ton soucis mais sans tester quelque chose me semble étrange :

Code:

$rec_scateg = $bdd->query("SELECT * FROM categorie where id = ".$_POST["idAuteur"]." ORDER BY sous_categ");

ça fonctionne ?? Les double quotes ne devrait pas être des simples ?

Code:

$rec_scateg = $bdd->query("SELECT * FROM categorie where id = ".$_POST['idAuteur']." ORDER BY sous_categ");

Non ?
26/08/2014, 11h49
maxtrident

ok c'est bon sauf que ça m'affiche rien dans le select 2.
on dirait que ça ne récupère pas le post...
26/08/2014, 13h17
BakSh0

Que te renvoi un

Code:

var_dump($_POST);
26/08/2014, 13h51
maxtrident

array(1) { ["idcatg"]=> string(0) "" }
dans le code source de ma page on ne voie pas la value <option value="" >Véhicule</option>
pourtant ça affiche bien Véhicule...trop bizarre.
26/08/2014, 14h00
BakSh0

Donc c'est normal qu'il n’exécute pas ta requête SQL puisque tu n’envoie pas d'idAuteur en POST donc ton code dans:

Code:

if(isset($_POST["idAuteur"])){

Ne s’exécutera jamais. Vérifie tes passages de POST car tu arrive à lui passer idcatg en POST (qui est vide :weird:)

Edit : Si ton option est vide tu verra bien la valeur de ton option mais lors du post la valeur sera bien vide :aie:

C'est aussi normal que ton option est vide, ta requete ne renvoi pas l'id :

Code:

SELECT DISTINCT categ FROM ...

Ta requête renvoi le champ categ et avec ton code :

Code:

$id_categ = $rec_catego['id'];

Tu demande le champ ID qui n'est pas renvoyé par ta requête précédente.
26/08/2014, 14h38
maxtrident

ha ok...parcontre si je met

Code:

$rec_categ = $bdd->query("SELECT DISTINCT categ, id, sous_categ FROM categorie where id != 1 ORDER BY categ");

il m'affiche les doublons du categ....une idée ?
c'est bon j'ai pris categ et pas id, tous est ok.
merci pour ton aide ;)

Je sauvegarde en session les select et autre quand je relance la page, mais le script ne fonctionne plus pour le changement du select 2 car il n'y a plus de changement dans le onchange.
J'ai essayé de bidouiller, mais je ne connais pas trop le javascript.
Quelqu'un peut m'aider ?

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
 
 <select name="categrech" id='categrech' <?php if ($categ !='' and $categ != 1) { echo 'style="background-color:#cad5d6"';} ?>  onchange="affichElement2( this.value)">
<option style="background-color:#fff" value="1" >Catégories</option>
 <?php
	$rec_categ = $bdd->query("SELECT DISTINCT categ FROM categorie where id != 1  ORDER BY categ");
 
	while ($rec_catego = $rec_categ->fetch())
	{
	$nom_categ = $rec_catego['categ'];
 
	if ($categ == $nom_categ)
    {
    ?>
<option value="<?php echo $nom_categ; ?>"  selected><?php echo $nom_categ;?></option>
 <?php
 }
 else 
 {
?>
<option value="<?php echo $nom_categ; ?>" style="background-color:#fff"><?php echo $nom_categ;?></option>
 <?php
 }
 }
 ?>
 </select>
 </div>
 <div class="bloccp" id="souscateg" style="display:none;">
 <select name="souscateg" <?php if ($souscateg !='' AND $souscateg != 1) { echo 'style="background-color:#cad5d6"';} ?>>
<option style="background-color:#fff" value="0" >Sous-Catégories</option>
  </select>
  </div>

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
 
<script type="text/javascript"> 
 
(function(){
    var inputsFrance = document.getElementsByName('categrech');
    for (var i=0, c=inputsFrance.length; i<c; i++) {
 
            if (inputsFrance[i].value == '1') {
            document.getElementById('souscateg').style.display='none';
			document.getElementById('contenu2').style.display = 'inline';
			} 
			else {
			document.getElementById('souscateg').style.display='inline';
			document.getElementById('contenu2').style.display = 'inline';
 
 
				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('souscateg').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","souscateg.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'categrech
				sel = document.getElementById('categrech');
				idauteur = sel.options[sel.selectedIndex].value;
				xhr.send("idAuteur="+idauteur);
            }
 
    }
})();
 
	function affichElement2(param) {
    var element  = param;    
 
    if (element  == "1") {
	//auto
        document.getElementById('souscateg').style.display='none';
       	document.getElementById('contenu2').style.display = 'inline';
	} 
	else {
        document.getElementById('souscateg').style.display='inline';
       	document.getElementById('contenu2').style.display = 'inline';
 
		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('souscateg').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","souscateg.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'categrech
				sel = document.getElementById('categrech');
				idauteur = sel.options[sel.selectedIndex].value;
				xhr.send("idAuteur="+idauteur);
	}
}
 
 
</script>

Fichier souscateg :

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
 
if ($_SESSION['rc_socateg'] != '') {
$souscateg = $_SESSION['rc_socateg'];
}
 
$idcat = $_POST['idAuteur'];
if ($idcat == '') {
if ($_SESSION['rc_categ'] != '') {
$idcat = $_SESSION['rc_categ'];
}}	
?>
 <select name="souscateg" <?php if ($souscateg !='' AND $souscateg != 1) { echo 'style="background-color:#cad5d6"';} ?>>
 <?php
	$rec_scateg = $bdd->query("SELECT * FROM categorie where categ = '$idcat' ORDER BY sous_categ");
	while ($rec_catego = $rec_scateg->fetch())
	{
	$id_categ = $rec_catego['id'];
	$nom_categ = $rec_catego['categ'];
	$sous_categorie = $rec_catego['sous_categ'];
 
	if ($souscateg == $sous_categorie)
    {
    ?>
<option value="<?php echo $sous_categorie;?>"  selected><?php echo $sous_categorie;?></option>
 <?php
 }
 else 
 {
?>
<option value="<?php echo $sous_categorie;?>" style="background-color:#fff"><?php echo $sous_categorie;?></option>
 <?php
 }
 }
?>
</select>

27/08/2014, 11h54
devyan

Bonjour,

C'est tout à fait normal que

Citation:

Envoyé par maxtrident

array(1) { ["idcatg"]=> string(0) "" }

si

Citation:

Envoyé par maxtrident

<option value="" >Véhicule</option>

Tu ne t'attends pas à recevoir "Véhicule" mais bien la valeur de l'attribut value n'est-ce pas ?

Sinon du code généré à la place du code PHP (comme indiqué dans les règles du forum) seraient peut-être plus parlantes...
28/08/2014, 10h05
maxtrident

personne peut me dire comment garder la position des select quand on refresh la page tous en gardant la même fonction si l'utilisateur modifie ?
28/08/2014, 16h31
BakSh0

Pour garder les infos lors du refresh stock les en $_SESSION

il est déja en session, c'est la position des select sélectionné que je veut garder... le premier select est bon mais le 2eme il faut un changement pour que le code soit activé...je pense qui faudrait ajouter ou modifier quelque chose sur le code plus bas ou ajouté une condition si la valeur categrech du select est différent de 1 lancer la fonction..... mais je sais pas comment faire.
Code:

1 2 3 4 5 6 7 8 9 10 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('souscateg').innerHTML = leselect; } }

29/08/2014, 14h00
devyan

Pour garder en mémoire une sélection ou une sais pas encore envoyée au serveur lors d'un refresh tu peux regarder du côté des cookies.
29/08/2014, 17h37
maxtrident

c'est pas un problème de sauvegarde mais d'affichage du 2eme select... le premier select (categorie) qui est récupéré par la session, mais comme il n'y a plus de changement le onchange n'est pas active donc n'affiche pas le résultat du select 2 (sous-categorie récupérer dans la base).
je peut forcer l'affichage avec la session récupéré du select2, mais si l'utilisateur modifie, plus rien ne fonctionnera.
02/09/2014, 10h29
Bovino

Tu penses mal ton "problème"...
Tu as mis en place un système de listes liées pour pouvoir afficher des résultats dépendants d'un premier choix dans ton deuxième select sans avoir à recharger la page.
Mais si la valeur du premier select est déjà connue à la création de la page, ça signifie que tu es capable de remplir la seconde liste directement à la création de la page, tu n'as donc pas besoin d'AJAX ni d'événement change. Pire, c'est même une perte de performances puisque ça t'oblige à créer un select vide, l'envoyer au navigateur qui lui va rappeler un script PHP qui renverra un résultat que tu es capable de récupérer à la création de la page.
05/09/2014, 21h51
maxtrident

oui mais quand le 1er select est connu (script ajax ne fonctionne plus) je fait montrer le resultat du 2eme select avec du php et des conditions pour afficher les infos du select 2...mais si l'utilisareur modifie le 1er select ça ne fonctionnera pas.