Discussion :

[titi6913]

Bonjour,

J'ai un petit problème qui m'embête beaucoup en ce moment. J'ai un formulaire de deux listes liées. Un champ projet qui se remplit par une requête mysql et un champs sous_product qui se remplit par une requête mysql mais selon le choix du projet. Je souhaite récupérer les valeurs de ces deux champs :

Pour le champ projet il n'y a aucun problème cela marche très bien mais le champs sous_product impossible.

code pour récuperer les valeurs

Code :

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

1
2
3
4
5
sel = document.getElementById('projet');
projet = sel.options[sel.selectedIndex].value;
 
sel2 = document.getElementById('sous_product');
sous_product = sel.options[sel2.selectedIndex].value;

code de mon formulaire

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
<form action="test2.php" method="post" enctype="multipart/form-data">
    <h2>Test de listes</h2><br>
    <label>projets</label>
    <select name='projet' id='projet' onchange='go("sous_product")'>
            <option value='-1'>Aucun</option>
            <?php
	    mysql_connect("localhost","","");
	    mysql_select_db("eprbdd");
	    $res = mysql_query("SELECT * FROM projet ORDER BY libelle");
	    while($row = mysql_fetch_assoc($res)){
	        echo "<option value='".$row["id"]."'>".$row["libelle"]."</option>";
	    }
	    ?>
    </select>
 
    <label>sous_product</label>
    <div id='sous_product' style='display:inline'>
	<select name='sous_product' id='sous_product'>
	    <option value='-1'>Choisir un projet</option>
        </select>
    </div>
</form>

Il me semble que le problème est du au div mais je n'arrive pas à valider le diplay:inline si je n'utilise pas cette méthode. En effet sel 2 prend la valeur div#sous_product au lieu de select#sous_product

Merci d'avance

[E.Bzz]

Bonjour,
il est interdit d'utiliser le même id (sous_product) deux fois dans une page

A+

[titi6913]

Le problème c'est que si je change le nom de ma div alors l'affichage dans la liste sous_product ne marche pas. J'ai une liste imbriquée dans une autre et impossible de faire un choix

[E.Bzz]

Le problème c'est que si je change le nom de ma div alors l'affichage dans la liste sous_product ne marche pas. J'ai une liste imbriquée dans une autre et impossible de faire un choix

Ben si tu changes l'id de la div, il va forcément falloir le changer partout où tu y fais référence, notamment dans tes fonctions JS

A+

[titi6913]

Je suis débutant en javascript et je n'y arrive toujours pas. Je ne souhaite pas appeler les div mais le select donc il ne me semble pas que j'appelle les div dans mes fonctions javascript.

[edenreal]

alors supprime simplement l'id de tes div, si tu t'en sert pour le css, modifie les id de tes div dans ton formulaire et dans ton css

(sauf erreur de ma part)

[E.Bzz]

Je ne souhaite pas appeler les div mais le select donc il ne me semble pas que j'appelle les div dans mes fonctions javascript.

Visiblement ta seconde liste (sous_product) est alimentée par une fonction Ajax.
C'est certainement dans cette fonction (entre autres) qu'il faut répercuter la modification de l'id que tu as faites dans le code HTML.

A+

[titi6913]

si je supprime l'id de mes div même probleme liste imbriqué dans une autre

vu qu'avant le div et le select avait le même id si je modifie le div en <div style='display:inline'> alors tout devrait marcher non ?

Mais cela ne marche pas je comprends pas pourquoi

[E.Bzz]

On ne pourra pas être plus précis si tu ne nous donnes pas plus de code ...
(code généré de la page de départ + fonction Ajax JavaScript + page PHP appelée par Ajax)

A+

[titi6913]

Désolé voici les codes qui vous interessent il me semble

fonction ajax :

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
function getXhr(){
    var xhr = null; 
    if(window.XMLHttpRequest) 
        xhr = new XMLHttpRequest(); 
        else if(window.ActiveXObject){ 
            try {
                    xhr = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
		     xhr = new ActiveXObject("Microsoft.XMLHTTP");
			     }
		}
		else { 
		        alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
			xhr = false; 
		      } 
    return xhr;
}
 
function go(nom)
{
    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(nom).innerHTML = leselect;
					}
				}
 
    // Ici on va voir comment faire du post
    xhr.open("POST","ajax_" + nom + ".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 du projet
    sel = document.getElementById('projet');
    id_projet = sel.options[sel.selectedIndex].value;
    xhr.send("id_projet="+id_projet);
}

page php (ajax_sous_product.php) appelée par ajax

Code :

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

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

le formulaire :

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
<form action="test2.php" method="post" enctype="multipart/form-data">
    <h2>Test de listes</h2><br>
    <label>projets</label>
    <select name='projet' id='projet' onchange='go("sous_product")'>
            <option value='-1'>Aucun</option>
            <?php
	    mysql_connect("localhost","","");
	    mysql_select_db("eprbdd");
	    $res = mysql_query("SELECT * FROM projet ORDER BY libelle");
	    while($row = mysql_fetch_assoc($res)){
	        echo "<option value='".$row["id"]."'>".$row["libelle"]."</option>";
	    }
	    ?>
    </select>
 
    <label>sous_product</label>
    <div id='sous_product' style='display:inline'>
	<select name='sous_product' id='sous_product'>
	    <option value='-1'>Choisir un projet</option>
        </select>
    </div>
</form>

et je souhaite donc récuperer la valeur du select de sous_product mais impossible alors que pour le projet aucun problème

[E.Bzz]

Alors en 3 étapes :

1. dans le formulaire :

   Code :

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

    <select name='projet' id='projet' onchange='go("div_sous_product")'>

2. dans le formulaire toujours :

   Code :

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

   <div id='div_sous_product' style='display:inline'>

3. dans ajax_sous_product.php :

   Code :

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

   echo "<option value='".$row["id"]."'>".$row["libelle"]."</option>";

   (z'ont rien à faire là ces <li></li> )

A+

[titi6913]

Merci beaucoup ca marche très bien maintenant en plus j'ai compris mon erreur.

Tu m'as fait avancer sur beaucoup de points

[SpaceFrog]

Bienvenue sur developpez ...

[andry.aime]

Bonjour,

J'ai proposé l'utilisation d'un retour XML depuis PHP pour remplir le select avec DOM dans le forum AJAX:
http://www.developpez.net/forums/d77...x/#post4489970
Je pense que c'est mieux que d'utiliser innerHTML pour remplacer le select.