Sujet Précédent Sujet Suivant

Erreur Id undefinded lors de sa récupération

Résolu/Fermé
albita2014 Messages postés 14 Date d'inscription mercredi 6 novembre 2013 Statut Membre Dernière intervention 9 novembre 2013 - Modifié par albita2014 le 6/11/2013 à 14:13
albita2014 Messages postés 14 Date d'inscription mercredi 6 novembre 2013 Statut Membre Dernière intervention 9 novembre 2013 - 8 nov. 2013 à 12:15
Bonjour à tous ,
je viens de m'inscrire sur le forum espérant trouvé une réponse à ma question ,je suis débutante en programmation web j'ai suivui ce tutoriel
https://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 ne peux récupérer qu'un seul ID l'autre Id pour la deuxième liste me donne erreur " ID undefinded "
voici la fonction qui récupère l'Id de region et affiche les communes concerné appellé en action onchange dans la liste region 

 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 la region
sel = document.getElementById('Region');
IDregion = sel.options[sel.selectedIndex].value;
xhr.send("IDregion ="+IDregion );  

}

que faut-il que je rajoute pour pouvoir récupérer l'ID du commune une fois elle se rempli à partir de la liste region pour pouvoir l'utiliser dans une requête ?

toutes aide est appréciable :)
d'avance merci

17 réponses

Réponse 1 / 17
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
6 nov. 2013 à 16:19
Salut,

Pour récupérer l'ID de la commune sélectionnée, tu peux définir une fonction sur l'événement onchange de ce select, par exemple : 

<select id="Commune" onchange="selectCommune()">
  <option value="1">Commune 1</option>
  <option value="2">Commune 2</option>
</select>

<script type="text/javascript">
	function selectCommune() {
		alert(document.getElementById('Commune').value);
	}
</script>

Bon développement
0
Réponse 2 / 17
albita2014 Messages postés 14 Date d'inscription mercredi 6 novembre 2013 Statut Membre Dernière intervention 9 novembre 2013
6 nov. 2013 à 17:07
merci Pitet pour votre réponse ,mais j'ai undefinded comme alerte peut être par ce que dans ma liste communes j'ai pas d'option il trouve pas l'ID :

voici le code de ma liste commune 

<select name='commune' id='commune' onchange='selectCommune()'>
					<option value='-1'></option>
				</select>
				<script type="text/javascript">
	function selectCommune() {
		alert(document.getElementById("communeline").value);
}
</script>


NB: voici la liste de region : 
<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>
sachant que pour récupérer l'ID de region je met document.getElementById("Region").value); ça marche mais cela ne marche pas pour les ID communes que faut-il que je rajoute?

merci d'avance
0
Réponse 3 / 17
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
6 nov. 2013 à 17:30
Dans le code ton dernier message, il semble qu'il y ai une erreur sur la valeur passé à getElementById : 
alert(document.getElementById("communeline").value);
L'identifiant communeline n'existe pas. La correction devrait être : 
alert(document.getElementById("commune").value);
0
Réponse 4 / 17
albita2014 Messages postés 14 Date d'inscription mercredi 6 novembre 2013 Statut Membre Dernière intervention 9 novembre 2013
6 nov. 2013 à 17:38
j'ai rectifié l'erreur mais malgré tout l'apel de cette fonction me retourne undefinded 
<select name='commune' id='commune' onchange='selectCommune()'>
					<option value='-1'></option>
				</select>
				<script type="text/javascript">
	function selectCommune() {
		alert(document.getElementById("commune").value);
}
</script>
avez-vous d'autre idées?
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 17
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
7 nov. 2013 à 09:59
Je ne comprend pas quand tu dis "dans ma liste communes j'ai pas d'option"

Une fois que la région est sélectionnée, tu remplis bien la balise select commune avec les balises options des communes ?

Peut on accéder à ton code en ligne ou travailles tu en local ?
0
Réponse 6 / 17
albita2014 Messages postés 14 Date d'inscription mercredi 6 novembre 2013 Statut Membre Dernière intervention 9 novembre 2013
7 nov. 2013 à 10:11
merci Pitet pour le suivui ,peut être je me suis mal exprimée je veux dire par là que ma liste commune n'a d'option que lorsque la region est sélectionnée ,
je travail en local .

je ne comprends pas pourquoi ça marche pas :( que faut -il que je fasse?
0
Réponse 7 / 17
Reivax962 Messages postés 3672 Date d'inscription jeudi 16 juin 2005 Statut Membre Dernière intervention 11 février 2021 1 011
7 nov. 2013 à 10:15
Bonjour,

Dans ce bout de code : 
xhr.send("IDregion ="+IDregion );
Attention, il y a une espace avant le "=" !
Retire-la, et tout devrait rentrer dans l'ordre :)

Xavier
0
Réponse 8 / 17
albita2014 Messages postés 14 Date d'inscription mercredi 6 novembre 2013 Statut Membre Dernière intervention 9 novembre 2013
7 nov. 2013 à 10:21
merci Reivax962 ,c'est juste une erreur de copier-coller :) mais l'erreur vient pas de là
0
Réponse 9 / 17
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
7 nov. 2013 à 10:28
Une autre erreur dans ton premier message (je ne sais pas si tu l'as corrigé) : 

// On se sert de innerHTML pour rajouter les options a la liste
document.getElementById('Commune').innerHTML = leselect;

Il y a une majuscule à Commune alors que ta balise select a id="commune" (sans majuscule).

Si ton select commune est bien remplis avec les balises option, la fonction javascript selectCommune() doit fonctionner normalement.

Peux tu poster le code html se ton select commune lorsqu'il est remplis avec les balises option ?
0
Réponse 10 / 17
albita2014 Messages postés 14 Date d'inscription mercredi 6 novembre 2013 Statut Membre Dernière intervention 9 novembre 2013
Modifié par albita2014 le 7/11/2013 à 10:56
oui mon select commune est bien rempli quand je choisi la region mais j'arrive pas à récupérer son ID bizarre non? ,le code de mes deux listes déroulante commune et region je l'ai déjà posté dans mon deuxième message ,je le ré-poste ?

j'ai même essayer cette fonction : 
function selectCommune() {
var $commune= document.getElementById("commune");
alert($commune.options[$commune.selectedIndex].value);
}
et j'ai reçu cette erreur 
TypeError: $commune.selectedIndex is undefined
que faire à votre avis?
0
Reivax962 Messages postés 3672 Date d'inscription jeudi 16 juin 2005 Statut Membre Dernière intervention 11 février 2021 1 011
7 nov. 2013 à 19:19
Commune avec ou sans majuscule ?
0
Réponse 11 / 17
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
7 nov. 2013 à 11:53
Le code de ton deuxième message est celui la : 

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

Dans ce select il n'y a qu'une seule option (sans texte d'ailleurs).
Ta fonction selectCommune se déclenche lorsque tu sélectionnes une ligne dans le select (événement onchange).
Puisqu'il n'y a qu'une seule option, le select ne va jamais changer et ta fonction ne sera jamais appelé.

Essaye avec ce select : 

<select name="commune" id="commune" onchange="selectCommune()">
  <option value="0">Choisir une commune</option>
  <option value="-1">Nom de la commune</option>
</select>
0
Réponse 12 / 17
albita2014 Messages postés 14 Date d'inscription mercredi 6 novembre 2013 Statut Membre Dernière intervention 9 novembre 2013
Modifié par albita2014 le 7/11/2013 à 12:29
ça n'a rien changé toujours "undefined" qui me retourne comme alerte j'ai appelé la fonction selectCommune dans un boutton pour tester sinon rien ne se déclanche .
0
Réponse 13 / 17
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
7 nov. 2013 à 12:35 
var $commune= document.getElementById("commune");

Attention à ne pas mettre de symbole $ devant le nom des variables en javascript, contrairement au php.

Voici l'exemple le plus simple que je puisse te proposer : 

<select name="commune" id="commune" onchange="alert(this.value)">
  <option value="0">Choisir une commune</option>
  <option value="-1">Nom de la commune</option>
</select>
0
Réponse 14 / 17
albita2014 Messages postés 14 Date d'inscription mercredi 6 novembre 2013 Statut Membre Dernière intervention 9 novembre 2013
Modifié par albita2014 le 7/11/2013 à 12:49
merci pour ton exemple je l'ai testé tout seul et avec la fonction selectCommune mais lorsque je sélectionne commune rien ne se passe ya pas d'alerte as tu une idée d'où vient le blême ? 
<select name='commune' id='commune' onchange="alert(this.value)">

<option value="0">Choisir une commune</option>
<option value="-1">Nom de la commune</option>
</select>

<script type="text/javascript">
function selectCommune() {
alert(document.getElementById("commune").value);}

merci encore pour le suivi
0
Réponse 15 / 17
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
7 nov. 2013 à 15:54
Si l'exemple de mon précédent message ne fonctionne pas, c'est que tu dois avoir une erreur javascript sur ta page qui bloque tout le reste du code javascript.

Tu peux vérifier les erreurs javascript dans la console web (menu Outils -> Développeur wev -> Console web sur Firefox).
0
Réponse 16 / 17
albita2014 Messages postés 14 Date d'inscription mercredi 6 novembre 2013 Statut Membre Dernière intervention 9 novembre 2013
7 nov. 2013 à 18:11
j'ai aucune erreur sur ma page d'après firbug ,çela m'étonne pourquoi ça marche pas pourquoi j'ai toujours undefinded ID pour la liste commune voici le code complet de ma page : 
 
 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Rechercher un lieu</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();
xhr.onreadystatechange = function(){
					
if(xhr.readyState == 4 && xhr.status == 200){
						leselect = xhr.responseText;
			
						document.getElementById('commune').innerHTML = leselect;
				}
				}
xhr.open("POST","ajaxCommune.php",true);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
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">Nom de la commune</option>
</select>
<input type="button"  name="Submit3" value="rechercher" onclick='selectCommune()'/>
  </form>
 
</body>
</html>

alors qu'en pensez-vous je suis vraiment désespérée
0
Reivax962 Messages postés 3672 Date d'inscription jeudi 16 juin 2005 Statut Membre Dernière intervention 11 février 2021 1 011
7 nov. 2013 à 19:22
Un coup tu as commune sans majuscule, un coup avec majuscule, un coup sans le « e » final... C'est vraiment tous des erreurs de copier-coller, ou bien ??
0
albita2014 Messages postés 14 Date d'inscription mercredi 6 novembre 2013 Statut Membre Dernière intervention 9 novembre 2013
Modifié par albita2014 le 7/11/2013 à 20:14
voilà mon code source sur lequel je travaille au cas ou vous pensez que l'erreur vient des nom de variables


rechercher.php 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="EN" lang="EN" dir="ltr">
<head profile="http://gmpg.org/xfn/11">
<title> portail SIG </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="imagetoolbar" content="no" />

<script type="text/javascript" src="http://localhost/ProjetSIG/lib/OpenLayers-2.13.1/OpenLayers.js"></script>
<script type="text/javascript" src="code1.js"></script>
<link rel="stylesheet" href="styles/layout.css" type="text/css" />
<script type="text/javascript" src="scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="scripts/jquery.slidepanel.setup.js"></script>
<script type="text/javascript" src="scripts/jquery.cycle.min.js"></script>
<script type="text/javascript" src="scripts/jquery.cycle.setup.js"></script>

<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('communeline').innerHTML = leselect;
}
}

// Ici on va voir comment faire du post
xhr.open("POST","ajaxLivre.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

sel = document.getElementById('mougataline');
idmough = sel.options[sel.selectedIndex].value;
xhr.send("idmough="+idmough); // idmough


}

</script>

<script type='text/javascript'>
function selectCommune() {
var idcm = document.getElementById("communeline").value ;
alert('id_com =' +idcm);
}
/*
function recupCombo() {
var  vv = document.getElementById("combo").selectedIndex;
//var var= document.getElementById('combo').selectedIndex;
alert(idInfra =++vv);
}*/
</script>


</head>
<body onLoad="init()" id="top" >
<div class="wrapper col0"></div>
<div class="wrapper col1" >
<div id="header">

<div id="logo">
<h1><a href="#"><strong>Portail SIG </strong></a></h1>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>><img src="images/index.jpg" alt="" name="index" width="321" height="104" border="0" id="index" onload="" /></a></td>
</tr>
</table>
</div>
<br class="clear" />
</div>

</div>
<div class="wrapper col2">

<p align="center" class="style11"> </p>
<table width="99%" height="523" border="0"> <span class="style10"></span> 
<tr>    <td width="27%" height="519">
<form action="nnn" method="post">
<table width="1024" border="0">
</table>
</form>

<form  name="f1" action="traitement.php" method="post">
<fieldset style="width: 500px">
<legend>Niveau</legend>
<label>Moughata</label>
<select name='mougataline' id='mougataline' onchange='go()'>
<option value='-1'></option>
<? 
$con = pg_connect("host=localhost dbname=xx user=postgres password=")
or die('Connexion impossible : ' . pg_last_error());
$res = pg_query("SELECT idmough,nom FROM mougataline ORDER BY nom");
while($row = pg_fetch_assoc($res)){
echo "<option value='".$row["idmough"]."'>".$row["nom"]."</option>";
}
?>
</select>
<label>communes</label>
<div id='communeline' style='display:inline'>
<select name='communeline' id='communeline' onchange='selectCommune()'>

<!--<option value='-1'></option>
<option value="0">Choisir une commune</option>-->
<option value="-1">Nom de la commune</option>
</select>

</div>
<label>
<input type="button"  name="Submit3" value="rechercher" />
</label>
<p>Catégorie :
<label>
<select name="combo" id="combo">
<option>Education</option>
<option>santé</option>
<option>l'alimentation en eau potable</option>
<option>l'éclairage</option>
<option>socioculturelle </option>
<option>l'économie</option>
</select>
</label>
<label>
<input type="button" name="Submit" value="test Ok " onclick='recupCombo()' />
</label>
</p>
</fieldset>
</form>
</div>
</div>
</body>
</html>
0
Reivax962 Messages postés 3672 Date d'inscription jeudi 16 juin 2005 Statut Membre Dernière intervention 11 février 2021 1 011
8 nov. 2013 à 09:31
OK j'ai trouvé. 

<div id='communeline' style='display:inline'>
<select name='communeline' id='communeline' onchange='selectCommune()'>

Tu as deux éléments avec le même ID.

Xavier
0
Réponse 17 / 17
albita2014 Messages postés 14 Date d'inscription mercredi 6 novembre 2013 Statut Membre Dernière intervention 9 novembre 2013
8 nov. 2013 à 12:15
merci beaucoup Reivax962 c'est résolu :)
0

Discussions similaires

Instagram "Désolé, une erreur s'est produite"
bananamilk -
cedric.masdeb -

60 réponses
Erreur de lecture sur iptv smarters
Bogs -
bazfile -

1 réponse
Comment définir ma nouvelle PS4 comme PS4 principale ?
cod-alpha -
hhh -

8 réponses
High Sierra : refus de réinstallation "serveur pas contacté"
pgwz132 -
pgwz132 -

2 réponses
Problème authentification
Bass -
KiwiFascinant81 -

7 réponses