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

**maxtrident** · 25/08/2014, 16h50

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 php :

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
<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 :

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
<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>

**SpaceFrog** · 25/08/2014, 16h51

si tu regardes juste au dessus de ton post il y a un post intitulé "select liés ou liste liées ..."

**maxtrident** · 25/08/2014, 17h19

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

**maxtrident** · 26/08/2014, 11h20

bon j'ai une erreur Parse error: syntax error, unexpected $end quand je clic sur le 1er select

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
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 php :

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
<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 php :

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
<?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 ?

**BakSh0** · 26/08/2014, 11h37

Bonjour,

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

Code php :

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

$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 php :

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

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

Non ?

**maxtrident** · 26/08/2014, 11h49

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...

**BakSh0** · 26/08/2014, 13h17

Que te renvoi un

Code php :

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

var_dump($_POST);

**maxtrident** · 26/08/2014, 13h51

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.

**BakSh0** · 26/08/2014, 14h00

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 :

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

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

)

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

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

Code sql :

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

SELECT DISTINCT categ FROM ...

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

Code php :

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

$id_categ = $rec_catego['id'];

Tu demande le champ ID qui n'est pas renvoyé par ta requête précédente.

**maxtrident** · 26/08/2014, 14h38

ha ok...parcontre si je met

Code :

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

$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

**maxtrident** · 27/08/2014, 11h38

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 php :

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
 
 <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 :

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
 
<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 php :

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
 
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>

**devyan** · 27/08/2014, 11h54

Bonjour,

C'est tout à fait normal que

Envoyé par maxtrident

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

si

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...

**maxtrident** · 28/08/2014, 10h05

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 ?

**BakSh0** · 28/08/2014, 16h31

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

**maxtrident** · 28/08/2014, 17h00

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 :

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

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;
	}
}

**devyan** · 29/08/2014, 14h00

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.

**maxtrident** · 29/08/2014, 17h37

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.

**Bovino** · 02/09/2014, 10h29

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.

**maxtrident** · 05/09/2014, 21h51

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.

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

AJAX

Discussions similaires

Partager

Partager