Impossible de récupérer ID avec getElementById

Version imprimable

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:

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

1 2 3 function selectCommune() { alert(document.getElementById("commune").value); }
voici la liste de region :
Code:

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

06/11/2013, 19h46
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. :roll:
06/11/2013, 20h15
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:

1 2 var $commune = document.getElementById("commune"); alert($commune.options[$commune.selectedIndex].value);
06/11/2013, 20h46
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. :roll:[/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:

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 :

Citation:

TypeError: $commune.selectedIndex is undefined

qu'est ce qui manque ?

merci d'avance
07/11/2013, 07h48
Bovino

Citation:

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

Heu... tu parles de IE 4 là... :aie:
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...
07/11/2013, 10h17
zinat

Citation:

Envoyé par Bovino

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

que doit-je faire ,une idée?

merci d'avance pour le suivi :)

Code:

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]

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:

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

07/11/2013, 11h52
Bovino

Code:

document.getElementById('commun').value

Code:

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

Etonnant que ça marche pas... :whistle:
07/11/2013, 12h07
zinat

Oui surtout que pour la liste déroulante region ça marche la même fonction j'ai publié tout le code si vous pourriez y jetez un coup d’œil je vous en serai très reconnaissante :)
07/11/2013, 18h49
NoSmoking

Bonjour,
lorsque tu reçois la réponse tu fais un

Code:

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

donc tu changes le innerHTML du SELECT ce qui n'est pas forcément une bonne chose, que contient réellement la variable leselect.

Citation:

Envoyé par zinat

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 :

Il y a plusieurs éléments avec un id dans la page, entre autres un avec "commune" et un avec "region"
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:

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>

07/11/2013, 20h51
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:

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
08/11/2013, 03h48
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 ;)
08/11/2013, 07h54
Bovino

Montre-nous comment tu construis ton select commune...
Peut-être essayes-tu d'insérer un select dans un autre select ?
Dit autrement, si ta requête AJAX renvoie une balise <select>, alors il y a de fortes chances que ça ne soit pas correct !
08/11/2013, 12h40
zinat

Bonjour ,
@Watilin comme vous l'avez dit c'était bien un conflit d'id dans la page il y avais deux id commune que je viens de remarquer :merci: à tous c'est :resolu: