Récupération des valeurs d'INPUTs créés dynamiquement ?

**Zebulon777** · 16/09/2014, 15h32

Salut tout le monde,

alors là, je ne comprends plus rien.
Je créé dynamiquement des INPUTs, mais impossible d'en récupérer les valeurs !

Je suis sur que je passe à côté de quelque chose de tout bête, mais je tourne en rond depuis le début de l'après-midi...

Je vous mets une partie du code :

Création des champs :

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
 
...
...
...
// CREATION DES CHAMPS
G_NbINPUT = G_NbINPUT + 1;
WId1 = "Input" + G_NbINPUT;
WLigne = "<tr><td width='"+WTaille1+"'>";
WLigne = WLigne + WLib1 + "</td><td align='right' width='"+WTaille2+"'>";
if (WElement1 != "INPUT")
{
	WLigne = WLigne + "Erreur dans le fichier XML sur " + WNomChamp1 + G_CrLf + "INPUT Number obligatoire dans cette section.";
}
else
{
	WLigne = WLigne + "<input type='"+WType1+"' id='" + WId1 + "' size='"+WSize1+"' class='"+WClasse1+"' value='"+WInit1+"' ";
	WLigne = WLigne + "placeholder='"+WId1+"' ";
	if (WType1 == "number")
	{
		WLigne = WLigne + "min='"+WVal_Min1+"' max='"+WVal_Max1+"' ";
		WLimite = "Numbers"; // Indique le type de caractères autorisés dans les INPUTs
		WOnKeyPress = "onkeypress='return inputLimiter(event,WLimite)'"; // Seuls les chiffres sont autorisés
		WLigne = WLigne + WOnKeyPress;
	};
	WLigne = WLigne +" />";
};
WLigne = WLigne + "</td>";
if (WLib2 != "")
{
	G_NbINPUT = G_NbINPUT + 1;
	WId2 = "Input" + G_NbINPUT;
	WLigne = WLigne + "<td width='"+WTaille1+"'>";
	WLigne = WLigne + WLib2 + "</td><td align='center' width='"+WTaille2+"'>";
	if (WElement2 != "INPUT")
	{
		WLigne = WLigne + "Erreur dans le fichier XML sur " + WNomChamp2 + G_CrLf + "INPUT Number obligatoire dans cette section.";
	}
	else
	{
		WLigne = WLigne + "<input type='"+WType2+"' id='" + WId2 + "' size='"+WSize2+"' class='"+WClasse2+" 'value='"+WInit2+"' ";
		WLigne = WLigne + "placeholder='"+WId2+"' ";
		if (WType2 == "number")
		{
			WLigne = WLigne + "min='"+WVal_Min2+"' max='"+WVal_Max2+"' ";
			WLimite = "Numbers"; // Indique le type de caractères autorisés dans les INPUTs
			WOnKeyPress = "onkeypress='return inputLimiter(event,WLimite)'"; // Seuls les chiffres sont autorisés
			WLigne = WLigne + WOnKeyPress;
		};
		WLigne = WLigne + " />";
	};
	WLigne = WLigne + "</td></tr>";
}
else
{
	WTaille = WTaille1 + WTaille2;
	WLigne = WLigne + "<td colspan='2' width='"+WTaille+"'>&nbsp;</td></tr>";
	WLigne = WLigne + "</td></tr>";
};
$('#'+WNomTAB).append($(WLigne));
...
...
...

Contrôle des champs :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
// CONTROLE DES CHAMPS
...
// Controle des autres champs
i = 0
while (i <= G_NbINPUT - 1)
{
	WId = "Input" + (i + 1);
	WVal = window.document.getElementById(WId).value;
// test de validité du champ à insérer ici.
	i = i + 1;
};
...

Où est-ce que je fais une erreur ?

PS : Je ne sais pas si ça a une importance, le HTML commence par un Window_onload() suivit tout de suite du FORM

**sekaijin** · 16/09/2014, 16h09

tu appelle quoi créer dynamiquement ??
car là ça n'a pas l'air d'être dynamique

j'ai l'impression que tu confond générer dynamiquement une page côté serveur

et modifier dynamiquement une page côté client.
Ici c'est le forum Javascript et ça se passe côté client

donc deux cas
1) ton problème est un problème est dans javascript comment récupéré des éléments d'une page
et tu est dans le bon forum
mais dans ce cas poste le HTML de ton navigateur et pas le code de ton serveur. le javascript ignore le code serveur et nous ne pouvons pas à coup sur déduire ce source HTML du code serveur.

2) ton problème est de générer correctements un source HTML sur le serveur et tu n'est pas dans le bon forum

A+JYT

**Zebulon777** · 17/09/2014, 09h39

Non, non, il n'y a pas de serveur concerné, c'est donc bien uniquement du JAVASCRIPT.

Ce que je veux dire par "dynamiquement", c'est que c'est le code Javascript qui créé les lignes de la tables et INPUTs dans les cellules.
J'attribue le nom de chaque champs "Input" par le code "Inputn" ou n varie de 1 à 94 et je construis la ligne qui permet de créer le champs "<input blablabla...>" ; c'est ensuite le code JQuery "$('#'+WNomTAB).append($(WLigne));" qui permet donc d'afficher la ligne sur la page.

Mais comme je l'ai dit, je n'arrive pas à récupérer les valeurs saisies et je ne trouve pas où ça cloche ?

C'est dans la boucle suivante que je voudrai récupérer toutes les valeurs pour les traiter :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
i = 0
while (i <= G_NbINPUT - 1)
{
   WId = "Input" + (i + 1);
   WVal = window.document.getElementById(WId).value;
			
alert(WId + G_Crf + WVal);			
			
   i = i + 1;
};

**lordmyko** · 17/09/2014, 11h38

Hello,

Comme le demande sekaijin, ce serait bien de poster le HTML (après l'insertion des lignes).

Sinon es que l’exécution du script passe bien dans la boucle? (boucle qui me fait un peu mal aux yeux d’ailleurs)

Code :

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

1
2
3
4
5
for(var i=1; i<G_NbINPUT; i++){
   WId = "Input" + i;
   WVal = window.document.getElementById(WId).value;		
   alert(WId + G_Crf + WVal);			
};

La console de ton navigateur affiche une erreur ou pas?

**devyan** · 17/09/2014, 11h57

Bonjour,

Si c'est lors du POST de ton formulaire que tu ne récupères pas les valeurs côté serveur c'est tout à fait normal car je n'ai pas vu d'attribut "name" dans ton code de déclaration des tags "input".

**Zebulon777** · 17/09/2014, 13h49

Effectivement, je n'ai pas mis de "name", pensant que le "id" suffisait, puisque je fais bien un getElementById et non un getElementByName, me trompe-je ?

**devyan** · 17/09/2014, 14h03

Je ne sais pas.
Enfin pas sans voir comment tu envoies le formulaire à ton serveur ...

**sekaijin** · 17/09/2014, 15h26

Ok vu le code je n'avais compris que tu générais une chaine de caractère en javascript pour la transformer en élément du DOM pour ensuite l'ajouter à un éléments.

tout cela est bien compliqué pour pas grand chose

Code :

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

1
2
3
4
5
6
7
('#existingContainer').append(
  $('<div/>')
    .attr("id", "newDiv1")
    .addClass("newDiv purple bloated")
    .append("<span/>")
      .text("hello world")
);

plus de concaténation de " et ' imbriqué etc.

de plus en faisant

Code :

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

1
2
3
var monInput
  $('<INPUT/>')
    .attr("id", "Input" + (i++));

tu crée un input
tu peux ensuite creer la table, les ligne et les cellules et mettre ton input dedans
mais tu peux aussi garder tout tes inputs dans un tableau
du coup pour récupérer les valeur plus besoin de chercher les input dan sle DOM vu que tu les as déjà dans le tableau.

quelque chose comme

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
44
45
46
47
48
49
50
 
...
...
...
// CREATION DES CHAMPS
G_inputs = [];
WId1 = "Input" + G_NbINPUT++;
WLigne = $('<tr/>').append(
  $('<td />')
  .attribute('width', WTaille1)
  .text(WLib1)
)
var content = $('<td />')
  .attribute('align', 'right')
  .attribute('width', WTaille2);
 
if (WElement1 != "INPUT")
{
   content.text("Erreur dans le fichier XML sur " + WNomChamp1 + G_CrLf + "INPUT Number obligatoire dans cette section.");
}
else
{
  var input = $('<input />')
  .attribute('type', WType1)
  .attribute('id', WId1)
  .attribute('size', WSize1)
  .attribute('class' WClasse1)
  .attribute('value'WInit1)
  .attribute('placeholder' WId1);
  if (WType1 == "number")
  {
    WLimite = "Numbers"; // Indique le type de caractères autorisés dans les INPUTs
    input
    .attribute('min', WVal_Min1)
    .attribute('max', WVal_Max1)
    .keypress(function (event) {return inputLimiter(event,"Numbers");}) // Seuls les chiffres sont autorisés
  };
  // ajout de l'input à la ligne de la table
  content.append(input);
  // ajout de l'input à la liste des inputs à récupérer
  G_inputs.push(input);
};
// ajout de la cellule à la ligne de la table
WLigne.append(content);
....
//ajout de la ligne à la table.
$('#'+WNomTAB).append($(WLigne));
...
...
...

du coup pour récupérer les valeurs

Code :

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

1
2
3
4
5
6
7
8
9
// CONTROLE DES CHAMPS
...
// Controle des autres champs
for (var i=0; i G_inputs.length; i++)
{
  WVal = G_inputs[i].value;
// test de validité du champ à insérer ici.
};
...

Je ne suis plus un aficionado de JQuery donc mes exemple peuvent contenir des erreurs
mais dans le principe je pense que tu as intérêt à revoir ça

bref cela m'a induit en erreur

au delà de la forme comme je le demandais ouvre ton navigateur et affiche la source je pense que tu as un pb de génération du DOM

sans voir le code généré il n'est pas évident d'y voir clair.

A+JYT

**Zebulon777** · 17/09/2014, 17h50

Merci pour cette réponse, je vais étudier ça de près, mais comme je ne suis pas un pro, ça va pas simplifier les choses

En lisant ça rapidement, je ne suis pas sur d'avoir tout compris, mais je vais surtout m'atteler à la récupération des valeurs, car tout le reste fonctionne nickel.

**devyan** · 18/09/2014, 09h52

Bonjour,

Peux-tu mettre le HTML généré ?

**Zebulon777** · 18/09/2014, 10h45

Bon, après une matinée (ou presque

) de tests, je n'y arrive pas (je ne suis (vraiment) pas un pro du développement...

)

D'ailleurs, dans les exemples ci-dessus, je ne comprends pas où est-ce que les valeurs saisies dans les INPUTs sont récupérées ?
Mais je ne vois pas non plus pourquoi avec mon code, je n'arrive pas à récupérer ce qui a été saisi dans les INPUTs ?

S'il faut que je fournisse tout le code, ce n'est pas un problème, mais je pense qu'il faudra plutôt le faire par mail.

**Zebulon777** · 18/09/2014, 11h07

Rhaaaaaaa, alors là, je vais me faire taper sur les doigts : je n'ai pas encore beaucoup l'habitude d'utiliser les débuggers, mais il de me permettre de me rendre copte que tout fonctionnait nickel, mais que j'avais uniquement une erreur sur une variable, mal écrite !

Si je vous dis que je suis entrain de m'arracher les cheveux, vous me croyez ?

En tout cas, encore merci pour l'aide.

Récupération des valeurs d'INPUTs créés dynamiquement ?

JavaScript

Discussions similaires

Partager

Partager