Récupération des valeurs select après innerHTML

**muppetshow** · 13/01/2011, 16h12

Bonjour,
Sur une page à partir de laquelle je souhaite affecter des éléments d'inventaire à des personnes, j'essaye de récupérer la valeur d'un élément select chargé dynamiquement par innerHTML.

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
43
 
function ChargeNomUser (IdExistant,Rang)
{	var sqlString = "SELECT Utilisateurs.IDUtilisateur, Utilisateurs.Utilisateur FROM Utilisateurs WHERE (((Utilisateurs.[Actif])=True)) ORDER BY Utilisateurs.Utilisateur;";
	var rs=new ActiveXObject("ADODB.Recordset");
	try { rs.Open (sqlString , conn, adOpenStatic, adLockUnspecified); }
	catch(e)
	{	alert (sqlString); 
		alert (e.description);
		rs = null;
		return "";
	}
	var Resultat = "<select onchange=\"SetNouveauUser(" + Rang + ")\"><option value='0'";
	if ((IdExistant == null) || (IdExistant == 0))
	{	Resultat += " SELECTED "
	}
	Resultat += "></option>";
 
	while (!rs.eof)
	{	Resultat += "<option value='" + rs.fields(0).Value + "'";
		if (IdExistant == rs.fields(0).Value)
		{	Resultat += " SELECTED ";
		}
		Resultat += ">" + rs.fields(1).Value + "</option>";
		rs.movenext;
	}
	Resultat += "</select>";
	rs.close;
	rs = null;
	return Resultat;
}
 
 
function ChangeUser (UserID,Rang)
{	var NouvelleChaine = ChargeNomUser (UserID,Rang);
	document.getElementById('IdUser' + Rang).innerHTML = NouvelleChaine;
}
 
...
 
{	chaine = "<tr><td align=left;>" + rs.fields(0).Value + "</td>";
	chaine += "<td align=center><img id=\"ClickUser" + idx +"\" style=\"width: 20px; height: 20px;\" src=\"../images/worker.png\"";
	chaine += "onclick=\"javascript:ChangeUser(" + rs.fields(5).Value + "," + idx + ")\"></td>";
	chaine += "<td id=\"IdUser" + idx + "\">" + rs.fields(1).Value + "</td>";

J'indexe les éléments de ma liste avec un incrément idx afin de pouvoir traiter la bonne ligne et je génère mon code en cliquant sur un icone (worker.png) avant de le passer dans l'innerHTML.

Tout fonctionne bien ... sauf que je n'arrive pas à récupérer la valeur du select ajouté dynamique quand je l'utilise.

J'ai vu différents post sur le web sur le sujet mais tous très anciens, indiquant des difficultés de cette méthode.

J'utilise IE8 et je devéloppe de l'hta.

Y a t'il quelque chose que je fais mal ou y aurait-il un moyen plus simple de faire ce que j'essayer de faire ?

D'avance merci

M.

**SpaceFrog** · 13/01/2011, 16h53

Y a t'il quelque chose que je fais mal

oui le innerHTML !

Passe par le DOM ...

**muppetshow** · 13/01/2011, 17h21

Merci ... mais encore ?

Serait-il possible d'avoir une réponse un peu plus élaborée utilisable comme base par un béotien ?

**vermine** · 13/01/2011, 18h12

Bonjour,

En fait il est préférable et hautement recommandé de créer les éléments dans l'arbre DOM. Vous pouvez effectuer des recherches sur le forum ou dans la Faq et même sur Google avec les mots-clefs (par exemple) :

createElement, appendChild, cloneNode, insertBefore

Les éléments ainsi créés pourront à coup sûr être interrogés par la suite.

**muppetshow** · 13/01/2011, 18h37

Merci Vermine,
Après quelques recherches, ma génération de zone select et donc la suivante

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
 
var sel = document.getElementById("select");
var opt = document.createElement("option");
var idx = 0;
var marker = 0;
while (!rs.eof)
{	opt.value = rs.fields(0).Value;
	opt.text = rs.fields(1).Value;
	sel.add (opt, null);
	if (IdExistant == rs.fields(0).Value)
	{	marker = idx;
	}
 
	rs.movenext;
	idx += 1;
}
sel.selectedindex = marker;

Par contre, cela se fait dans une fonction, donc j'imagine qu'il faudrait que j'utilise une variable global pour l'utiliser dans ma page ?

Ma question est donc maintenant comment est-ce que je fais pour la positionner à l'écran à l'endroit que je souhaite, comme je pouvais le faire avant avec

Code :

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

1
2
 
document.getElementById('IdUser' + Rang).innerHTML = NouvelleChaine;

et comment je fais pour le détruire une fois que j'ai récupérer ma valeur ?

Merci

**vermine** · 13/01/2011, 20h15

Là vous récupérer un élément déjà existant dont l'id est "select"

Code :

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

document.getElementById("select");

Ce qui veut dire que l'élément est déjà positionné. Ne serait-ce pas plutôt :

Code :

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

1
2
3
4
5
6
 
var mon_select = document.createElement("SELECT");
 
//... le reste du code
 
document.getElementById('IdUser' + Rang).appendChild(mon_select);

**muppetshow** · 13/01/2011, 21h26

Merci beaucoup Vermine, je commence à voir un peu plus clair !

C'est vrai qu'il existe beaucoup de tuto français et anglais mais ce sont toujours des cas simples qu'il n'est pas toujours facile d'adapter pour des novices.

En tout cas merci beaucoup, j'essaye demain.

**muppetshow** · 14/01/2011, 10h25

Bonjour,
Après les lumières de Vermine et quelques fouilles, voici à quoi ressemble mon code :

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
 
var sel = document.getElementById("IdUser" + Rang);
sel.type = "Select";
var opt = document.createElement("option");
var idx = 0;
var marker = 0;
while (!rs.eof)
{	opt.value = rs.fields(0).Value;
	opt.text = rs.fields(1).Value;
	try { sel.add (opt, null); }	// tout browser
	catch(ex)
	{	sel.add (opt); }			// IE only
	if (IdExistant == rs.fields(0).Value)
	{	marker = idx;
	}
 
	rs.movenext;
	idx += 1;
}
rs.close;
rs = null;
sel.selectedIndex = marker;

J'obtiens maintenant un message d'erreur sur la ligne sel.add (opt) m'indiquant que l'objet ne gère pas cette prorpiété ou méthode.

J'imagine que c'est parce que, initialement, mon Id est une zone de texte, d'ou la ligne

Code :

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

sel.type="Select"

, sans que ça n'y change rien.

Est-ce que cela veut dire qu'il faut que je définisse toutes mes zones d'affichage concernées par des select ou y a t'il autre chose que je ne fasse pas correctement ?

Merci

**sekaijin** · 14/01/2011, 13h54

ou as tu défini la methode add sur ton objet sel ????

**vermine** · 14/01/2011, 14h28

L'ajout d'une option doit se faire sur un tag <select>. Soit vous l'avez déjà dans votre page, soit vous le créez :

Code :

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

var mon_select = document.createElement("SELECT");

**muppetshow** · 14/01/2011, 15h19

C'est vrai que j'utilise

Code :

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

1
2
 
var sel = document.getElementById("IdUser" + Rang);

et non

Code :

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

1
2
 
var sel = document.createElement("SELECT");

parce que, sinon, je ne vois (comprends pas

) comment je vais faire pour positionner le nouveau select exactement à l'endroit que je souhaite étant donnée que ma page est déjà formatée au moment ou j'appelle ma fonction et que je voudrais remplacer ma zone d'affichage texte par la possibilité de sélectionner un élément dans une liste ???

Sekaijin, j'imagine que la définition de la fonction passe par le typage de la zone ? d'où le changement de type de ma zone initiale pour bénéficier des méthodes du select ?

**sekaijin** · 14/01/2011, 15h54

Non non non et non

ton problème c'est que sel.add n'existe pas

peut importe que tu récupère sel par un e getElement ou que tu le construise

la méthode add doit être définie javascript ne la connait pas

tu ne peux donc pas l'utiliser si tu ne fais pas quelque part

Code :

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