[DOM] Données de champs de formulaires générés en JS inaccessibles

Version imprimable

11/03/2008, 15h53
Albataur

[DOM] Données de champs de formulaires générés en JS inaccessibles

Bonjour,

Dans une page HTML je génére en JS (en utilisant l'API mootools) des champs de formulaire texte. Ceux-ci portent tous les même nom ce qui me permet de récupérer dans une servlet un tableau de données.

Le seul problème est que je n'arrive pas à récupérer les données de ces champs générés dynamiquement. Les seules données que je récupère sont celles des champs inscris en dur dans la page html.

Est-ce un comportement normal ? Et si oui y a t'il une solution (simple ?) ?

Merci d'avance !
11/03/2008, 15h55
SpaceFrog

de quel type de champs s'agit il ?
de memoire ce sujet à déja été traité, et sous IE le name ne peut etre attribué dynamiquement ...

sauf a utiliser une syntaxe

Code:

document.createElement("select name='machin'");

arf j'ai retrouvé un truc
http://www.developpez.net/forums/sho...ight=dynamique
http://www.developpez.net/forums/sho...34&postcount=6
11/03/2008, 16h16
Matthieu2000

Vérifie que tes champs sont dans le bon formulaire!
11/03/2008, 16h22
SpaceFrog

montre nous le html généré ...

A priori, c'est ce que j'utilise pour ajouter mes champs inputs text (enfin ce que mootools fait à priori).

Mais je viens de constater que cela fonctionne avec IE. C'est uniquement FF qui semble ignorer ces données dans la requète POST.

Voici le code JS :

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
 
var completers = new Array(); //mes champs texte
initCompleters();
function initCompleters(){
/*
 La fonction créé des champs avec auto-completion donc rien à voir avec mon problème
*/
}
//Lorsque je clique sur un bouton "+" cette fonction est lancée
function addCompleter(){
	i = nCompleter = $ES('input[name=params]').length; //nombre de champs texte
	lastCompleter = $('param'+(i-1)+'_field');
//créé l'élément DOM
	theCompleter = new Element('input', {
						'type' : 'text',
						'id' : 'param' + i + '_field',
						'class' : 'input_text',
						'name' : 'params',
						'onselect' : 'addCompleter(i)'
					});
//et l'ajoute après le dernier input text
	theCompleter.injectAfter(lastCompleter);
	initCompleters();
}

Et voici la source DOM générée (les deux premiers champs sont en dur et les deux seconds générés en JS) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<div id="add_signature">
 
		Signature :
		<table>
		<tbody><tr><td>Return :</td>
		<td><input autocomplete="off" name="ret_type" value="" class="input_text" id="return_field" type="text"></td></tr>
		<tr><td>Parameters :</td>
		<td>
		<input autocomplete="off" name="params" class="input_text" id="param0_field" type="text">
		<input autocomplete="off" name="params" class="input_text" id="param1_field" type="text">
 
		<input autocomplete="off" name="params" class="input_text" id="param2_field" type="text">
<input autocomplete="off" name="params" class="input_text" id="param3_field" type="text">
<input class="plus" onclick="addCompleter()" type="button">
		</td></tr>
		</tbody></table>
		<input id="add_sig" name="action" value="add_sig" class="ajouter" type="submit">
</div>

11/03/2008, 16h31
SpaceFrog

heu je ne vois pas les balises form ?? c'est normal ?

Effectivement, en écrivant le message je constate que les balises de formulaire se déplacent dans la source DOM ...

Ca c'est la source du document HTML :

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
 
<FORM id="form_ope" action="ActionsSecondStep" method="post">
		<select size="5" name="ope_id" id="operations_list" style="clear:both">
 
 
			<option selected="selected" value="0">xcbcxb</option>
 
		</select>
		<input type="submit" id="add_interf" value="rem_ope" name="action" class="moins" />
		</div>		
 
 
		<div id="add_signature">
		Signature :
		<table>
 
		<tr><td>Return :</td>
		<td><INPUT TYPE="text" NAME="ret_type" value="" class="input_text" id="return_field" /></td></tr>
		<tr><td>Parameters :</td>
		<td>
		<INPUT TYPE="text" NAME="params" class="input_text" id="param0_field" />
		<INPUT TYPE="text" NAME="params" class="input_text" id="param1_field" />
		<input type="button" class="plus" onClick="addCompleter()"  />
		</td></tr>
 
		</table>
		<input type="submit" id="add_sig" name="action" value="add_sig" class="ajouter" />
		</div>
		</FORM>

Et ça la source DOM :

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
 
<form id="form_ope" action="ActionsSecondStep" method="post">
		<select size="5" name="ope_id" id="operations_list" style="clear: both;">
 
 
			<option selected="selected" value="0">xcbcxb</option>
 
		</select>
		<input id="add_interf" value="rem_ope" name="action" class="moins" type="submit">
		</form></div>		
 
 
		<div id="add_signature">
 
		Signature :
		<table>
		<tbody><tr><td>Return :</td>
		<td><input autocomplete="off" name="ret_type" value="" class="input_text" id="return_field" type="text"></td></tr>
		<tr><td>Parameters :</td>
		<td>
		<input autocomplete="off" name="params" class="input_text" id="param0_field" type="text">
		<input autocomplete="off" name="params" class="input_text" id="param1_field" type="text">
 
		<input autocomplete="off" name="params" class="input_text" id="param2_field" type="text"><input autocomplete="off" name="params" class="input_text" id="param3_field" type="text"><input class="plus" onclick="addCompleter()" type="button">
		</td></tr>
		</tbody></table>
		<input id="add_sig" name="action" value="add_sig" class="ajouter" type="submit">
		</div>

Ce qui est bizarre, c'est que même comme ça je reçois toutes mes données de frmulaire mais pas les deux champs générés dynamiquement ...

11/03/2008, 16h36
SpaceFrog

comme préssenti les éléments ajoutés ne le sont pas dans le form ...

... peut être Motools n'aime-t-il pas les tables dans les form .. tout comme le w3c d'ailleurs ;)
11/03/2008, 16h40
Matthieu2000

champs hors du formulaire et donc non transmis

grillé
11/03/2008, 16h47
Albataur
Oui mais il reste deux problèmes dans ce cas :
1. Pourquoi la balise </form> se déplace t'elle ??
2. Pourquoi malgré le fait que les champs "params" soient hors des balises form, je reçois tout de même les deux premiers qui sont ceux qui sont en dur dans le HTML ?
11/03/2008, 16h50
SpaceFrog

les deux premier étant englobés dans la balise form il est normal qu'ils soient transmis ... quoiqui le bouton sublit étant en dehors du form... les navigateurs doivent extrapoler le fait qu'il n'y ait qu'un form sur le page ?

par contre pour le déplacement de la balise ...????

si tu n'ajoutes rien tu es sur que le bouton submit est bien dans le form ?

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
<script type='text/javascript'>
var index=0
 
function addElt(){
var newElt=document.createElement('input');
newElt.name="nom_"+index;
newElt.value="Valeur_"+index
newElt.style.clear="right";
index++;
document.forms[0].insertBefore(document.createElement('br'),document.getElementById('sub'));
document.forms[0].insertBefore(newElt,document.getElementById('sub'));
}
</script>
 
</head>
 
<body onload="alert(self.location.href)" >
 
<form name='one' action="#" method="get" />
<input type="text" name='two' />
<input type="submit" name='three' id='sub'  />
</form>
<input type='button'  value='go' onclick="addElt()" />
</body>

11/03/2008, 17h04
Albataur
Citation:

Envoyé par SpaceFrog

les deux premier étant englobés dans la balise form il est normal qu'ils soient transmis ...

Je parle de ces deux premiers là :
Code:

1 2 <input autocomplete="off" name="params" class="input_text" id="param0_field" type="text"> <input autocomplete="off" name="params" class="input_text" id="param1_field" type="text">
... qui ne sont pas plus dans le FORM que les deux suivants ;)
11/03/2008, 17h09
SpaceFrog

Parceque le navigateur doit garder en mémoire en partie la configuration de départ ???
Les mystères de javascript ...

En tout cas le code ci dessus fonctionne, je supçonne fort motools de bugguer

Le problème venait bien de ces balises FORM mal placés ... Pour obtenir la valeur du champ "ope_id" du coup j'ai été obligé de rajouter un champ hidden par du JS lorsque l'utilisateur sélectionne un élément dans la liste.

Voici le nouveau code :

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
 
		<select size="5" name="ope_id" id="operations_list" style="clear: both;" onchange="updateOpeId()">
 
 
			<option value="0">Connect</option><option selected="selected" value="1">Send</option>
 
		</select>
 
		<input id="add_interf" value="rem_ope" name="action" class="moins" type="submit">
		</div>		
 
 
		<form id="form_interf" action="ActionsSecondStep" method="post">
 
		<input name="ope_id" id="ope_hidden" value="1" type="hidden">
 
		<div id="add_signature">
		Signature :
		<table>
		<tbody><tr><td>Return :</td>
		<td><input autocomplete="off" name="ret_type" value="" class="input_text" id="return_field" type="text"></td></tr>
 
		<tr><td>Parameters :</td>
		<td>
		<input autocomplete="off" name="params" class="input_text" id="param0_field" type="text">
		<input autocomplete="off" name="params" class="input_text" id="param1_field" type="text">
		<input autocomplete="off" name="params" class="input_text" id="param2_field" type="text"><input class="plus" onclick="addCompleter()" type="button">
		</td></tr>
		</tbody></table>
		<input id="add_sig" name="action" value="add_sig" class="ajouter" type="submit">
 
		</div>
		</form>

Et voici ce que ça donne :
http://bougetoi.com/autres/screen.png
On peut ajouter des champs "parameters" en cliquant sur "+" et lorsque j'ajouter une signature, je dois également connaitre le nom de l'opération slélectionnée.