Discussion :

[Albataur]

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 !

[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 :

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

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

[Matthieu2000]

Vérifie que tes champs sont dans le bon formulaire!

[SpaceFrog]

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

[Albataur]

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 :

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
 
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 :

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
 
<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>

[SpaceFrog]

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

[Albataur]

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 :

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
 
<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 :

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
 
<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 ...

[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

[Matthieu2000]

champs hors du formulaire et donc non transmis

grillé

[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 ?

[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 ?

[SpaceFrog]

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
<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>

[Albataur]

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 :

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

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

[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

[Albataur]

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 :

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
 
		<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 :

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.