Récupération des valeurs select après innerHTML [Résolu]

[muppetshow]

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 :

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]

Y a t'il quelque chose que je fais mal

oui le innerHTML !

Passe par le DOM ...

[muppetshow]

Merci ... mais encore ?

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

[vermine]

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]

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

Code :

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 :

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]

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

Code :

document.getElementById("select");

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

Code :

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

[muppetshow]

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]

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

Code :

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 :

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]

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

[vermine]

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 :

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

[muppetshow]

C'est vrai que j'utilise

Code :

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

et non

Code :

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]

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 :

sel.add = function .....

A+JYT

[SpaceFrog]

http://www.mredkj.com/tutorials/tutorial005.html