Récuperation valeur select rempli dynamiquement

Version imprimable

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:

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:

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

21/07/2009, 14h05
E.Bzz

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

A+
21/07/2009, 14h09
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
21/07/2009, 14h14
E.Bzz

Citation:

Envoyé par 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

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

A+
21/07/2009, 14h25
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.
21/07/2009, 14h31
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)
21/07/2009, 14h36
E.Bzz

Citation:

Envoyé par titi6913

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+
21/07/2009, 14h42
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
21/07/2009, 14h49
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+

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

fonction ajax :

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

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:

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

21/07/2009, 15h18
E.Bzz
Alors en 3 étapes :
1. dans le formulaire :
  
  Code:
  
  <select name='projet' id='projet' onchange='go("div_sous_product")'>
2. dans le formulaire toujours :
  
  Code:
  
  <div id='div_sous_product' style='display:inline'>
3. dans ajax_sous_product.php :
  
  Code:
  
  echo "<option value='".$row["id"]."'>".$row["libelle"]."</option>";
  
  (z'ont rien à faire là ces <li></li> :aie: )
A+
21/07/2009, 15h51
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 :ccool::ccool::ccool:
21/07/2009, 15h53
SpaceFrog

:mouarf:
Bienvenue sur developpez ...
22/07/2009, 08h47
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.