Discussion :

[zinat]

Bonjour ,
je galére depuis des heures pour récupérer l'ID d'une liste liée à une autre j'ai suivui le tutoriel de siddh
http://siddh.developpez.com/articles/ajax/
pour créer deux liste déroulantes liées en Ajax une pour les regions l'autre pour les communes ça marche jusqu'a là mais je voudrais récupérer les ID de ces deux liste mais je n'ai pu récupérer que l' ID de région ,la fonction qui récupére l'ID commune me retourne la valeur " undefinded "
voici le code de ma liste commune qui me retourne undefinded comme alerte

Code html :

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

1
2
3
<select name='commune' id='commune' onchange='selectCommune()'>
	<option value='-1'></option>
</select>

Code :

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

1
2
3
function selectCommune() {
	alert(document.getElementById("commune").value);
}

voici la liste de region :

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
<select name='Region' id='Region' onchange='go()'>
	<option value='-1'></option>
<? 
$con = pg_connect("host=localhost dbname=xx user=postgres password=xxx")
or die('Connexion impossible : ' . pg_last_error());
$res = pg_query("SELECT IDregion ,nom FROM region ORDER BY nom");
while($row = pg_fetch_assoc($res)){
 echo "<option value='".$row["IDregion "]."'>".$row["nom"]."</option>";
}
?>
</select>

avez-vous une proposition pour que je puisse récupérer l'ID de commune ?

merci d'avance

[Bovino]

Si tu n'as qu'une seule option dans le select, je vois mal à quel moment l'option sélectionnée peut changer et déclencher le onchange.

[Watilin]

Bovino a raison, tu ne peux pas tester un select avec une seule option.

Tu peux éventuellement doubler ton onchange d'un onclick et d'un onkeyup, à condition que ta fonction puisse être appelée plusieurs fois de suite sans problème (par exemple, envoyer plusieurs fois la même requête Ajax).

Autre chose, certains vieux navigateurs ne lient pas directement la value au select. À la place, il faut faire :

Code :

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

1
2
var $commune = document.getElementById("commune");
alert($commune.options[$commune.selectedIndex].value);

[zinat]

merci Bovino et Watilin pour vos réponse mais ça marche toujours pas

Bovino, si tu n'as qu'une seule option dans le select, je vois mal à quel moment l'option sélectionnée peut changer et déclencher le onchange. [/quote]

en fait j'ai plusieurs options dans la liste communes mais ils n'apparaissent qu’après avoir choisi la liste région c'est pourquoi je n'arrive pas à récupérer l'ID de communes puisque je n'ai rien dans l'option , lorsque je choisi une region il ya plusieurs communes qui y sont et chacun à son ID c'est pourquoi j'ai mis onchange

Watilin, voilà j'ai testé votre fonction avec onclick dans un bouton

Code :

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

1
2
3
4
function selectCommune() {
	var $commune= document.getElementById("commune");
alert($commune.options[$commune.selectedIndex].value);
}

Et voici le message d'erreur par firbug :

TypeError: $commune.selectedIndex is undefined

qu'est ce qui manque ?

merci d'avance

[Bovino]

Autre chose, certains vieux navigateurs ne lient pas directement la value au select.

Heu... tu parles de IE 4 là...
Absolument tous les navigateurs actuellement utilisés (y compris IE 6) savent lier une balise select au value de l'option sélectionnée.

zinat, si on en croit le message d'erreur, soit le select n'a pas d'id "commune", soit cet id n'est pas unique dans la page...

[zinat]

zinat, si on en croit le message d'erreur, soit le select n'a pas d'id "commune", soit cet id n'est pas unique dans la page...

Absolument ce ID "commune" n'est pas unique dans la page puisqu'il ya l'ID "region "aussi sinon je ne sais pas comment doit je faire pour que le select prend l'id "commune" si le getElementbyId retourne qu"il est indéfini

que doit-je faire ,une idée?

merci d'avance pour le suivi

[SpaceFrog]

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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Nouvelle page 1</title>
<script>
function selectCommune() {
    alert( document.getElementById('commun').value );
}
</script>
</head>
<body>
<select name='commune' id='commune' onchange='selectCommune()'>
    <option value='-1' selected="selected">Selectionner la commune</option>
    <option value='1'>Paris</option>
    <option value='2'>Lyon</option>
    <option value='3'>Marseille</option>
    <option value='4'>Bordeaux</option>
    <option value='5'>Nouans le Fuselier</option>
</select>
</body>
</html>

Ton souci est ailleurs ...

[edit]
mauvais copier coller depuis jsfiddle qui bug aujourd'hui
[/edit]

[zinat]

Merci SpaceFrog pour votre collaboration ;
y'a pas d'option par défaut dans ma liste déroulante commune elle se rempli à partir de la liste région ,j'ai pas de souci à part que j'arrive pas à récupérer l'ID

ailleurs ou ? voici mon code complet

Code html :

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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></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('commune').innerHTML = leselect;
                                        }
                                }
 
                                // Ici on va voir comment faire du post
                                xhr.open("POST","ajaxCommune.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('Region');
                                IDregion = sel.options[sel.selectedIndex].value;
                                xhr.send("IDregion="+IDregion); 
 
 
                        
                        }
                
</script>
 
	<script type='text/javascript'>
        
function recup() { // cette fonction retourne bien l'ID region 
var IdRegion= document.getElementById("Region").value;
alert('iDRegion=' +IdRegion);
 
 }
<script>
function selectCommune() { //cela retourne undefinded pour l'iD commune 
    alert( document.getElementById('commun').value );
}
 
</script>
</head>
<body>
 <form  name="f1" action="traitement.php" method="post">
<select name='Region' id='Region' onchange='go()'>
	<option value='-1'></option>
<? 
$con = pg_connect("host=localhost dbname=xx user=postgres password=xxx")
or die('Connexion impossible : ' . pg_last_error());
$res = pg_query("SELECT IDregion ,nom FROM region ORDER BY nom");
while($row = pg_fetch_assoc($res)){
 echo "<option value='".$row["IDregion"]."'>".$row["nom"]."</option>";
}
?>
</select>
<select name='commune' id='commune' onchange='selectCommune()'>
	<option value='-1'></option>
</select>
<input type="button"  name="Submit3" value="rechercher" onclick='selectCommune(),recup()'/>
  </form>
 
</body>
</html>

merci d'avance pour toute aide

[Bovino]

Code :

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

document.getElementById('commun').value

Code html :

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

<select name='commune' id='commune' onchange='selectCommune()'>

Etonnant que ça marche pas...

[Watilin]

Absolument ce ID "commune" n'est pas unique dans la page puisqu'il ya l'ID "region "aussi

Alors pour être clair, quand je parlerai d'id dans ce post, ça voudra dire l'attribut html "id".

Je comprends ce que tu dis de deux façons :

1. Il y a plusieurs éléments avec un id dans la page, entre autres un avec "commune" et un avec "region"
2. Il y a plusieurs éléments avec l'id "commune" dans la page

Si c'est 1, c'est tout à fait normal et ce n'est pas ça qui est à l'origine de ton problème.

En revanche, si c'est 2, tu as un conflit d'id (conflit d'idées ?). Tu vas devoir modifier les id des autres éléments qui portent l'id "commune", pour qu'il n'y ait plus que ton <select> qui l'ait.

Faisons une simple expérience :

Code html :

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
<!DOCTYPE html>
<html lang=fr>
<head>
   <meta charset=utf-8>
   <title>Collision d'id</title>
</head>
<body>
   <p id=collision>Bonjour</p>
   <p id=collision>Au revoir</p>
   <script>
      console.log(document.getElementById("collision").textContent);
      // Affiche « Bonjour ».
      // On voulait « Au revoir » ? C'est raté…
   </script>
</body>
</html>

[zinat]

Bonsoir à tous ,
@Watilin
c'est 1 : j'ai pas de conflit d'id dans la page donc c'est pas ça l'origine d mon problème .

@NoSmoking

Code :

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

document.getElementById('commune').innerHTML = leselect;

alors je le fais comment ?

je ne sais pas exactement que faut-il que je fasse si je teste pour la liste toute seule (sans la lier avec une autre liste déroulante ) je peux bien récupérer son ID alors que la même fonction me retourne que l'ID est indéfini si la liste est liée ,une idée ?

merci d'avance

[Watilin]

Examine ton <select> avec l’inspecteur web de ta console, avant de lier les listes puis après. Ça t’aidera à comprendre comment fonctionne innerHTML, et tu verras que quand tu remplaces le <select>, il faut que tu réécrives l’id, autrement il ne se remet pas tout seul