Javascript/DOM : problème de formulaire

Version imprimable

06/03/2006, 19h25
Jherek

Javascript/DOM : problème de formulaire

Je génère des elements de formulaire avec DOM, et je cherche à les inserer dans un formulaire existant, statique dans mon code HTML, sachant que, là, je les insère comme child d'elements de table. Même si cette table est dans mon formulaire, mon navigateur ne remarque pas que les élements de formulaire devraient faire partie du formulaire situé "au-dessus" de la table.
Quelqu'un sait comment faire ? Le problème, c'est que j'ai 3 tonnes d'elements statiques, dans ce formulaire, alors tout generer en DOM (surtout qu'il y a des bouts generés en JSP), ça serait pas drole.
06/03/2006, 19h55
spilliaert

tu peux coller un bout de code ?
Parce que logiquement, tous les inputs dans un <form></form>, devraient être assimilées dans ce form...
07/03/2006, 08h18
SpaceFrog

un problème d'appendChild au mauvais endroit sans doute mais ma boule de crystal est en chez le repareteur...
un bout de code nous serait utile...

Moi je veux bien, mais c'est long. Bon courage :)

Alors la déclaration du formulaire (plein de choses avant et après, tout statique) :

Code:

1
2
 
<form name="restartForm" method="get" action="servlet/RestartValidationServlet">

Ensuite on a une bonne partie de formulaire statique (600 à 700 lignes. Je vais vous épargner ça, je pense), puis :

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
 
<table width="90%" border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td width="20" height="25"><img src="/crm/img/table/images/Corner_left_up.gif" width="20" height="25" alt=""></td>
              <td valign="bottom" background="/crm/img/table/images/Center_up.gif" class="title" height="25">&nbsp;&nbsp;Affinage de la cible   :</td>
              <td width="20" height="25"><img src="/crm/img/table/images/Corner_right_up.gif" width="20" height="25" alt=""></td>
            </tr>
            <tr>
 
              <td><img src="/crm/img/table/images/joint_left.gif" width="20" height="5" alt=""></td>
              <td background="/crm/img/table/images/joint_center.gif" height="5"><img src="/crm/img/spacer.gif" width="298" height="5" alt=""></td>
              <td><img src="/crm/img/table/images/joint_right.gif" width="20" height="5" alt=""></td>
            </tr>
            <tr>
            <td background="/crm/img/table/images/tableau_07.gif">&nbsp;</td>
                <td align="center" valign="top" class="cell_table1">Nombre de champs :
            	<select name="nbchamps" class="select_menu" onChange="display2(document.getElementById('super'))">
 
                    <option  value="1">1</option>
 
 
                    <option selected value="2">2</option>
 
                    <option  value="3">3</option>
 
                    <option  value="4">4</option>
 
                    <option  value="5">5</option>
 
                    <option  value="6">6</option>
 
                    <option  value="7">7</option>
 
 
                    <option  value="8">8</option>
 
                    <option  value="9">9</option>
 
                </select>
                </td>
            </tr>
            <tr>
              <td background="/crm/img/table/images/tableau_07.gif">&nbsp;</td>
              <td bgcolor="#FFFFFF"><table width="100%" border="0" cellspacing="2" cellpadding="0" class="table_result" id="super">
 
                <script type="text/javascript">
                display(document.getElementById('super'));
                //document.write(displayed.join(''));
				</script>
 
              </table></td>
              <td background="/crm/img/table/images/border_right.gif">&nbsp;</td>
            </tr>
            <tr>
              <td width="20" height="20"><img src="/crm/img/table/images/Corner_left_down.gif" width="20" height="20" alt=""></td>
              <td background="/crm/img/table/images/Center_bottom.gif" height="20">&nbsp;</td>
              <td width="20" height="20"><img src="/crm/img/table/images/Corner_right_down.gif" width="20" height="20" alt=""></td>
 
            </tr>
          </table>

Ensuite, la fonction display2() :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
function display2(parent) {
	var newParent = document.createElement('table');
	newParent.setAttribute('width','100%');
	newParent.setAttribute('border','0');
	newParent.setAttribute('cellspacing','2');
	newParent.setAttribute('cellpadding','0');
	newParent.setAttribute('class','table_result');
	newParent.setAttribute('id','super');
	var parentParent = parent.parentNode;
	//alert("Parent node :"+parentParent+" Parent node name : "+parentParent.nodeName);
	parentParent.replaceChild(newParent,parent);
	display(newParent);
 
}

la fonction display() :

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
 
function display(parent) {
    //displayed = new Array();
    //var parent = document.getElementById(sParent);
    //displayed = [];
    //deleteChildren(parent);
	var nbFields = document.restartForm['nbchamps'].value;
    var emptyArray = new Array();
    for (i=0;i<nbFields;i++) {
    	//if (i<(nbFields-1)) {
    	  if (i%3==0) {
    	  	var trtr2 = document.createElement("tr");
    	  	parent.appendChild(trtr2);
    	    //displayed.push("</tr><tr>");
    	  }
    	  var tdtd2 = document.createElement("td");
    	  tdtd2.setAttribute("width","33%");
    	  trtr2.appendChild(tdtd2);
    	  var main = document.createElement("table");
    	  main.setAttribute("id","rtable"+i);
      	  main.setAttribute("width","100%");
      	  main.setAttribute("border","0");
      	  main.setAttribute("cellspacing","2");
      	  main.setAttribute("cellpadding","0");
      	  tdtd2.appendChild(main);
      	  if (i < 2) {
	    	if (tabParam[i][0]=='age') { render_age(i+1,tabParam[i],main);} else if (tabParam[i][0]=='sexe') { render_sexe(i+1,tabParam[i],main);}
    	} else {
    	    render_age(i+1,emptyArray,main);
    	}
   	}
   	//alert(displayed);
}

Et un morceau de la fonction render_age() :

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
44
45
46
 
function render_age(number,tab,parent) {
var restartForm = document.getElementById('restartForm');
var tra = document.createElement('tr');
var tda = document.createElement('td');
tda.setAttribute('height','20');
tda.setAttribute('class','title_rub_table');
var texta = document.createTextNode('Champs'+number);
var trb = document.createElement('tr');
var tdb = document.createElement('td');
tdb.setAttribute('height','2');
tdb.setAttribute('background','/crm/img/barre_inter.gif');
var imga = document.createElement('img');
imga.setAttribute('src','/crm/img/spacer.gif');
imga.setAttribute('width','1');
imga.setAttribute('height','2');
parent.appendChild(tra);
parent.appendChild(trb);
tra.appendChild(tda);
trb.appendChild(tdb);
tda.appendChild(texta);
tdb.appendChild(imga);
var trc = document.createElement('tr');
var tdc = document.createElement('td');
parent.appendChild(trc);
trc.appendChild(tdc);
var selectType = document.createElement('select');
selectType.setAttribute('id','fieldType'+number);
selectType.setAttribute('class','select_menu');
var selName = selectType.getAttribute('id');
selectType.setAttribute('onChange','renderchoice("'+selName+'",'+number+')');
tdc.appendChild(selectType);
var optionType0 = document.createElement('option');
if ('age'=='age') {
 optionType0.setAttribute('selected','selected');
}
optionType0.setAttribute('value','age');
var contentType0 = document.createTextNode('age');
optionType0.appendChild(contentType0);
selectType.appendChild(optionType0);
var optionType1 = document.createElement('option');
if ('sexe'=='age') {
 optionType1.setAttribute('selected','selected');
}
optionType1.setAttribute('value','sexe');
...

Quand j'affiche la proprieté form d'un élement de formulaire de render_age(), ça donne null.

07/03/2006, 11h44
denisC

Re: Javascript/DOM : problème de formulaire

Citation:

Envoyé par Jherek

mon navigateur ne remarque pas que les élements de formulaire devraient faire partie du formulaire situé "au-dessus" de la table.

C'est lequel de navigateur?

Sinon, une table dans un formulaire, ce n'est pas valide HTML, donc il faut pas trop leur en demander à ces pauvres petits navigateurs.....

PS: merci pour les balises code.
07/03/2006, 11h50
Jherek

Mon navigateur, c'est FireFox 1.5, sous XP.

Cela dit, on lui demande pas non plus la lune, au navigateur : je veux juste que ce qui est compris entre le <form> et le </form> soit inclus dans le formulaire lors de l'envoi des parametres au serveur, pour que je puisse utiliser les données saisies dans la servlet devant traiter ces données. Ca doit quand même être possible, non ? :?
Ce qui est assez dingue, c'est que visuellement, c'est nickel. Mon formulaire dynamique est de toute beauté. Mais si le traitement ne fonctionne pas, ça va pas servir à grand-chose... :cry:
07/03/2006, 11h59
SpaceFrog

l'attribution dynamique d'evènement avec passage de paramètres dans des fonctions est assez complexe...

jette un oeil ici
07/03/2006, 12h30
denisC
Citation:
Envoyé par Jherek

Code:

1 2 3 4 5 6 7 8 9 if ('age'=='age') { optionType0.setAttribute('selected','selected'); } ... if ('sexe'=='age') { optionType1.setAttribute('selected','selected'); } ...

Quand j'affiche la proprieté form d'un élement de formulaire de render_age(), ça donne null.
Euh, ils sont pas plutot bizarre tes tests dans la fonction render_age???? Sinon, il faudrait la totalité de cette fonction.

On est bien d'accord que ce qui ne fonctionne pas c'est la liaison entre les selects que tu créé dans cette méthode et le formulaire qui les englobe.

Tu as vérifié qu'en les insérant à un autre point (typiquement après ou avant ton tableau) cela fonctionne?

Tu as validé ton code HTML? (je pense que non, parceque l'inclusion table dans form) Firefox est assez strict avec ce genre de choses.
07/03/2006, 14h00
Jherek

Si les tests sont un peu bizarres, c'est parce que le code est généré automatiquement en Java.
Effectivement, ce qui ne marche pas, c'est la liaison entre le formulaire et les élements insérés dynamiquement (select et input). Mais comme dit, le problème est au niveau logique. Visuellement, tout apparait normalement.

Je ne suis pas sûr de comprendre ce que tu dis concernant l'inclusion de table dans form. Si on ne peut pas faire ça, ça interdit en gros de présenter un formulaire de manière un chouilla esthétique.
07/03/2006, 14h05
SpaceFrog

tu as été voir mon lien ?

Code:

selectType.setAttribute('onChange',function(){renderchoice(this.trucmachin)});

en ayant attrinbue un trucmachin à ton selectType ...
07/03/2006, 14h10
denisC

Citation:

Envoyé par Jherek

Je ne suis pas sûr de comprendre ce que tu dis concernant l'inclusion de table dans form. Si on ne peut pas faire ça, ça interdit en gros de présenter un formulaire de manière un chouilla esthétique.

Mais si, on peut :)

:arrow: http://www.fredcavazza.net/doc/tutoriels/formulaire/SVF_intro.htm

Sinon, en fait, c'est autorisé, tu peux mettre une table dans ton formulaire.

Tu es sur que les ouverture/fermeture de balises sont cohérentes (validation de la page?)

Sinon, pour les tests débiles, c'est pas parcequ'ils sont générés en Java que ça te donne le droit de les générer. Au moment ou tu les generes, tu peux les évaluer et dire ce qu'il faut faire.....
07/03/2006, 14h34
Jherek

Je ne suis pas sûr de saisir. En fait, tu dis qu'on peut mettre des tables dans un formulaire. Ca ne serait qu'un bête (peut-très pénible à trouver vu la taille du binz, mais simple sur le concept) problème de validation du HTML ?

sinon, pour les tests, c'est vrai que je me suis pas trop fait ch... sur ce coup. :D

Je vais peut-etre repasser dessus si j'ai le temps...
07/03/2006, 15h05
denisC

Citation:

Envoyé par Jherek

Je ne suis pas sûr de saisir. En fait, tu dis qu'on peut mettre des tables dans un formulaire. Ca ne serait qu'un bête (peut-très pénible à trouver vu la taille du binz, mais simple sur le concept) problème de validation du HTML ?

Disons que c'est une piste possible. Parceque l'insertion d'un select en utilisant le DOM dans un formulaire, ça marche sous Firefox 1.5, c'est sur.

Donc ton problème doit bien venir d'ailleurs. Et une des pistes est la construction de ta page (validation) sur laquelle Firefox est beaucoup plus strict que IE....
07/03/2006, 17h56
Jherek

Oui, c'est bien la bonne piste, je pense. J'utilise Eclipse avec le plug-in J2EE, ce qui permet de voir la JSP sous forme d'arborescence. Ca permet de voir où le formulaire "s'arrete", d'après Eclipse. Et il s'arrete bien en amont de l'endroit où j'insère les bouts de formulaires générés dynamiquement. Le HTML que m'a livré le designer de ma boite, c'est n'importe quoi...
Bon, au moins je sais d'où ça vient. Mais pour remettre le truc d'équerre, ça va être gai.
07/03/2006, 18h46
Jherek
Le validateur du W3C indique une erreur qui me surprend un peu :

Citation:

Line 2641 column 46: document type does not allow element "SCRIPT" here; assuming missing "CAPTION" start-tag.

<script type="text/javascript">

La ligne en question, c'est un petit bout de Javascript en plein dans la page :
Code:

1 2 3 4 <script type="text/javascript"> display(document.getElementById(' </script>
Sinon, il ne reste plus que des erreurs genre utilisation d'attributs propriétaires et absence d'attribut "alt" dans les images. Je ne pense pas que ça puisse faire planter l'insertion d'élements DOM, ça quand même ?
07/03/2006, 21h43
m@t

Est-ce que tu as une page en ligne pour qu'on voit le script dans son ensemble ?
08/03/2006, 09h25
denisC
Citation:
Envoyé par Jherek

La ligne en question, c'est un petit bout de Javascript en plein dans la page :

Code:

1 2 3 4 <script type="text/javascript"> display(document.getElementById(' </script>
Euh, c'est quand même pas tout le script ça???? En effet, cette erreur est inquiétante.

Citation:

Envoyé par Jherek

Sinon, il ne reste plus que des erreurs genre utilisation d'attributs propriétaires et absence d'attribut "alt" dans les images. Je ne pense pas que ça puisse faire planter l'insertion d'élements DOM, ça quand même ?

Non, en effet, rien à voir avec le DOM. Essaye de régler la première erreur :)
08/03/2006, 09h26
denisC

Citation:

Envoyé par Jherek

Le validateur du W3C indique une erreur qui me surprend un peu :

Citation:

Line 2641 column 46: document type does not allow element "SCRIPT" here; assuming missing "CAPTION" start-tag.

<script type="text/javascript">

Ce fameux bout de script, il serait pas dans le tableau qui est dans ton formulaire des fois? Tu peux essayer de le virer, juste pour voir si ça marche (l'insertion d'élement) sans ce morceau?

Oui, c'est exactement ça. Mais si j'enlève ce bout de script, l'insertion initiale des élements DOM ne se fera plus, et je n'aurais donc plus rien au chargement de la page. Cela dit, vu que je passe en parametre l'element que je veux utiliser comme racine de mon arbre DOM, je dois pouvoir executer cette fonction à un autre endroit, non ?

(Edit) Je vais mettre un bout de code un peu plus grand, juste pour dire que :
Code:

1 2 3 4 5 6 7 8 9 10 <td bgcolor="#FFFFFF"> <table width="100%" border="0" cellspacing="2" cellpadding="0" class="table_result" id="super"> <script type="text/javascript"> display(document.getElementById('super')); //document.write(displayed.join('')); </script> </table> </td>

08/03/2006, 11h25
Jherek

Bon, à titre expérimental, j'ai enlevé le bout dde javascript dans la table. Comme prévu, au chargement de la table, rien n'apparait. Ensuite, quand je sélection le nombre de champs à ajouter au formulaire dans ma combobox, ça apparait comme il se doit. Là, j'ai tenté une validation, et je n'ai que des erreurs genre "alt manquant dans balise img" et "attribut inconnu, probablement propriétaire" sur des attributs genre "rightmargin". Plus d'erreur grave.
Sauf que ça ne marche toujours pas : quand j'affiche dans un "alert" la propriété form d'un des élements de formulaire généré, c'est toujours "null", et quand je clique sur le bouton de validation de la page, la servlet qui récupère les infos ne connait toujours pas les paramètres correspondant aux champs générés par DOM. :(
Pas de progrès notable, en somme (même si avoir du HTML valide, c'est toujours mieux). Ca peut venir d'autre chose ?
08/03/2006, 11h44
Jherek

Citation:

Envoyé par m@t

Est-ce que tu as une page en ligne pour qu'on voit le script dans son ensemble ?

Désolé, je suis derrière un pare-feu.

Comme quelqu'un l'avait demandé, voici la fonction render_age().
number est le rang de la case dans le tableau, tab un Array contenant les valeurs sélectionnées et parent la racine de l'arbre (la table) :

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
 
function render_age(number,tab,parent) {
var restartForm = document.getElementById('restartForm');
var tra = document.createElement('tr');
var tda = document.createElement('td');
tda.setAttribute('height','20');
tda.setAttribute('class','title_rub_table');
var texta = document.createTextNode('Champs'+number);
var trb = document.createElement('tr');
var tdb = document.createElement('td');
tdb.setAttribute('height','2');
tdb.setAttribute('background','/crm/img/barre_inter.gif');
var imga = document.createElement('img');
imga.setAttribute('src','/crm/img/spacer.gif');
imga.setAttribute('width','1');
imga.setAttribute('height','2');
parent.appendChild(tra);
parent.appendChild(trb);
tra.appendChild(tda);
trb.appendChild(tdb);
tda.appendChild(texta);
tdb.appendChild(imga);
var trc = document.createElement('tr');
var tdc = document.createElement('td');
parent.appendChild(trc);
trc.appendChild(tdc);
var selectType = document.createElement('select');
selectType.setAttribute('id','fieldType'+number);
selectType.setAttribute('class','select_menu');
var selName = selectType.getAttribute('id');
selectType.setAttribute('onChange','renderchoice("'+selName+'",'+number+')');
tdc.appendChild(selectType);
var optionType0 = document.createElement('option');
if ('age'=='age') {
 optionType0.setAttribute('selected','selected');
}
optionType0.setAttribute('value','age');
var contentType0 = document.createTextNode('age');
optionType0.appendChild(contentType0);
selectType.appendChild(optionType0);
var optionType1 = document.createElement('option');
if ('sexe'=='age') {
 optionType1.setAttribute('selected','selected');
}
optionType1.setAttribute('value','sexe');
var contentType1 = document.createTextNode('sexe');
optionType1.appendChild(contentType1);
selectType.appendChild(optionType1);
var tr0 = document.createElement('tr');
var td0 = document.createElement('td');
parent.appendChild(tr0);
tr0.appendChild(td0);
var span0 = document.createElement('span');
span0.setAttribute('class','link_blue');
var text0 = document.createTextNode('de');
var select0 = document.createElement('select');
select0.setAttribute('id','denumber');
select0.setAttribute('class','select_menu');
var option0_15 = document.createElement('option');
if (tab[1]==15) {
option0_15.setAttribute('selected','selected');
}
option0_15.setAttribute('value','15');
var content0_15 = document.createTextNode('15');
option0_15.appendChild(content0_15);
select0.appendChild(option0_15);
var option0_16 = document.createElement('option');
if (tab[1]==16) {
option0_16.setAttribute('selected','selected');
}
option0_16.setAttribute('value','16');
var content0_16 = document.createTextNode('16');
option0_16.appendChild(content0_16);
select0.appendChild(option0_16);
var option0_17 = document.createElement('option');
if (tab[1]==17) {
option0_17.setAttribute('selected','selected');
}
option0_17.setAttribute('value','17');
var content0_17 = document.createTextNode('17');
option0_17.appendChild(content0_17);
select0.appendChild(option0_17);
var option0_18 = document.createElement('option');
if (tab[1]==18) {
option0_18.setAttribute('selected','selected');
}
option0_18.setAttribute('value','18');
var content0_18 = document.createTextNode('18');
option0_18.appendChild(content0_18);
select0.appendChild(option0_18);
var option0_19 = document.createElement('option');
if (tab[1]==19) {
option0_19.setAttribute('selected','selected');
}
option0_19.setAttribute('value','19');
var content0_19 = document.createTextNode('19');
option0_19.appendChild(content0_19);
select0.appendChild(option0_19);
var option0_20 = document.createElement('option');
if (tab[1]==20) {
option0_20.setAttribute('selected','selected');
}
option0_20.setAttribute('value','20');
var content0_20 = document.createTextNode('20');
option0_20.appendChild(content0_20);
select0.appendChild(option0_20);
var option0_21 = document.createElement('option');
if (tab[1]==21) {
option0_21.setAttribute('selected','selected');
}
option0_21.setAttribute('value','21');
var content0_21 = document.createTextNode('21');
option0_21.appendChild(content0_21);
select0.appendChild(option0_21);
var option0_22 = document.createElement('option');
if (tab[1]==22) {
option0_22.setAttribute('selected','selected');
}
option0_22.setAttribute('value','22');
var content0_22 = document.createTextNode('22');
option0_22.appendChild(content0_22);
select0.appendChild(option0_22);
var option0_23 = document.createElement('option');
if (tab[1]==23) {
option0_23.setAttribute('selected','selected');
}
option0_23.setAttribute('value','23');
var content0_23 = document.createTextNode('23');
option0_23.appendChild(content0_23);
select0.appendChild(option0_23);
var option0_24 = document.createElement('option');
if (tab[1]==24) {
option0_24.setAttribute('selected','selected');
}
option0_24.setAttribute('value','24');
var content0_24 = document.createTextNode('24');
option0_24.appendChild(content0_24);
select0.appendChild(option0_24);
var option0_25 = document.createElement('option');
if (tab[1]==25) {
option0_25.setAttribute('selected','selected');
}
option0_25.setAttribute('value','25');
var content0_25 = document.createTextNode('25');
option0_25.appendChild(content0_25);
select0.appendChild(option0_25);
var option0_26 = document.createElement('option');
if (tab[1]==26) {
option0_26.setAttribute('selected','selected');
}
option0_26.setAttribute('value','26');
var content0_26 = document.createTextNode('26');
option0_26.appendChild(content0_26);
select0.appendChild(option0_26);
var option0_27 = document.createElement('option');
if (tab[1]==27) {
option0_27.setAttribute('selected','selected');
}
option0_27.setAttribute('value','27');
var content0_27 = document.createTextNode('27');
option0_27.appendChild(content0_27);
select0.appendChild(option0_27);
var option0_28 = document.createElement('option');
if (tab[1]==28) {
option0_28.setAttribute('selected','selected');
}
option0_28.setAttribute('value','28');
var content0_28 = document.createTextNode('28');
option0_28.appendChild(content0_28);
select0.appendChild(option0_28);
var option0_29 = document.createElement('option');
if (tab[1]==29) {
option0_29.setAttribute('selected','selected');
}
option0_29.setAttribute('value','29');
var content0_29 = document.createTextNode('29');
option0_29.appendChild(content0_29);
select0.appendChild(option0_29);
var option0_30 = document.createElement('option');
if (tab[1]==30) {
option0_30.setAttribute('selected','selected');
}
option0_30.setAttribute('value','30');
var content0_30 = document.createTextNode('30');
option0_30.appendChild(content0_30);
select0.appendChild(option0_30);
var option0_31 = document.createElement('option');
if (tab[1]==31) {
option0_31.setAttribute('selected','selected');
}
option0_31.setAttribute('value','31');
var content0_31 = document.createTextNode('31');
option0_31.appendChild(content0_31);
select0.appendChild(option0_31);
var option0_32 = document.createElement('option');
if (tab[1]==32) {
option0_32.setAttribute('selected','selected');
}
option0_32.setAttribute('value','32');
var content0_32 = document.createTextNode('32');
option0_32.appendChild(content0_32);
select0.appendChild(option0_32);
var option0_33 = document.createElement('option');
if (tab[1]==33) {
option0_33.setAttribute('selected','selected');
}
option0_33.setAttribute('value','33');
var content0_33 = document.createTextNode('33');
option0_33.appendChild(content0_33);
select0.appendChild(option0_33);
var option0_34 = document.createElement('option');
if (tab[1]==34) {
option0_34.setAttribute('selected','selected');
}
option0_34.setAttribute('value','34');
var content0_34 = document.createTextNode('34');
option0_34.appendChild(content0_34);
select0.appendChild(option0_34);
td0.appendChild(span0);
span0.appendChild(text0);
td0.appendChild(select0);
var tr0 = document.createElement('tr');
var td0 = document.createElement('td');
td0.setAttribute('align','center');
td0.setAttribute('valign','top');
td0.setAttribute('class','cell_table1');
var img0 = document.createElement('img');
img0.setAttribute('src','/crm/img/spacer.gif');
img0.setAttribute('width','3');
img0.setAttribute('height','10');
parent.appendChild(tr0);
tr0.appendChild(td0);
td0.appendChild(img0);
var tr1 = document.createElement('tr');
var td1 = document.createElement('td');
parent.appendChild(tr1);
tr1.appendChild(td1);
var span1 = document.createElement('span');
span1.setAttribute('class','link_blue');
var text1 = document.createTextNode('à');
var select1 = document.createElement('select');
select1.setAttribute('id','ànumber');
select1.setAttribute('class','select_menu');
var option1_15 = document.createElement('option');
if (tab[2]==15) {
option1_15.setAttribute('selected','selected');
}
option1_15.setAttribute('value','15');
var content1_15 = document.createTextNode('15');
option1_15.appendChild(content1_15);
select1.appendChild(option1_15);
var option1_16 = document.createElement('option');
if (tab[2]==16) {
option1_16.setAttribute('selected','selected');
}
option1_16.setAttribute('value','16');
var content1_16 = document.createTextNode('16');
option1_16.appendChild(content1_16);
select1.appendChild(option1_16);
var option1_17 = document.createElement('option');
if (tab[2]==17) {
option1_17.setAttribute('selected','selected');
}
option1_17.setAttribute('value','17');
var content1_17 = document.createTextNode('17');
option1_17.appendChild(content1_17);
select1.appendChild(option1_17);
var option1_18 = document.createElement('option');
if (tab[2]==18) {
option1_18.setAttribute('selected','selected');
}
option1_18.setAttribute('value','18');
var content1_18 = document.createTextNode('18');
option1_18.appendChild(content1_18);
select1.appendChild(option1_18);
var option1_19 = document.createElement('option');
if (tab[2]==19) {
option1_19.setAttribute('selected','selected');
}
option1_19.setAttribute('value','19');
var content1_19 = document.createTextNode('19');
option1_19.appendChild(content1_19);
select1.appendChild(option1_19);
var option1_20 = document.createElement('option');
if (tab[2]==20) {
option1_20.setAttribute('selected','selected');
}
option1_20.setAttribute('value','20');
var content1_20 = document.createTextNode('20');
option1_20.appendChild(content1_20);
select1.appendChild(option1_20);
var option1_21 = document.createElement('option');
if (tab[2]==21) {
option1_21.setAttribute('selected','selected');
}
option1_21.setAttribute('value','21');
var content1_21 = document.createTextNode('21');
option1_21.appendChild(content1_21);
select1.appendChild(option1_21);
var option1_22 = document.createElement('option');
if (tab[2]==22) {
option1_22.setAttribute('selected','selected');
}
option1_22.setAttribute('value','22');
var content1_22 = document.createTextNode('22');
option1_22.appendChild(content1_22);
select1.appendChild(option1_22);
var option1_23 = document.createElement('option');
if (tab[2]==23) {
option1_23.setAttribute('selected','selected');
}
option1_23.setAttribute('value','23');
var content1_23 = document.createTextNode('23');
option1_23.appendChild(content1_23);
select1.appendChild(option1_23);
var option1_24 = document.createElement('option');
if (tab[2]==24) {
option1_24.setAttribute('selected','selected');
}
option1_24.setAttribute('value','24');
var content1_24 = document.createTextNode('24');
option1_24.appendChild(content1_24);
select1.appendChild(option1_24);
var option1_25 = document.createElement('option');
if (tab[2]==25) {
option1_25.setAttribute('selected','selected');
}
option1_25.setAttribute('value','25');
var content1_25 = document.createTextNode('25');
option1_25.appendChild(content1_25);
select1.appendChild(option1_25);
var option1_26 = document.createElement('option');
if (tab[2]==26) {
option1_26.setAttribute('selected','selected');
}
option1_26.setAttribute('value','26');
var content1_26 = document.createTextNode('26');
option1_26.appendChild(content1_26);
select1.appendChild(option1_26);
var option1_27 = document.createElement('option');
if (tab[2]==27) {
option1_27.setAttribute('selected','selected');
}
option1_27.setAttribute('value','27');
var content1_27 = document.createTextNode('27');
option1_27.appendChild(content1_27);
select1.appendChild(option1_27);
var option1_28 = document.createElement('option');
if (tab[2]==28) {
option1_28.setAttribute('selected','selected');
}
option1_28.setAttribute('value','28');
var content1_28 = document.createTextNode('28');
option1_28.appendChild(content1_28);
select1.appendChild(option1_28);
var option1_29 = document.createElement('option');
if (tab[2]==29) {
option1_29.setAttribute('selected','selected');
}
option1_29.setAttribute('value','29');
var content1_29 = document.createTextNode('29');
option1_29.appendChild(content1_29);
select1.appendChild(option1_29);
var option1_30 = document.createElement('option');
if (tab[2]==30) {
option1_30.setAttribute('selected','selected');
}
option1_30.setAttribute('value','30');
var content1_30 = document.createTextNode('30');
option1_30.appendChild(content1_30);
select1.appendChild(option1_30);
var option1_31 = document.createElement('option');
if (tab[2]==31) {
option1_31.setAttribute('selected','selected');
}
option1_31.setAttribute('value','31');
var content1_31 = document.createTextNode('31');
option1_31.appendChild(content1_31);
select1.appendChild(option1_31);
var option1_32 = document.createElement('option');
if (tab[2]==32) {
option1_32.setAttribute('selected','selected');
}
option1_32.setAttribute('value','32');
var content1_32 = document.createTextNode('32');
option1_32.appendChild(content1_32);
select1.appendChild(option1_32);
var option1_33 = document.createElement('option');
if (tab[2]==33) {
option1_33.setAttribute('selected','selected');
}
option1_33.setAttribute('value','33');
var content1_33 = document.createTextNode('33');
option1_33.appendChild(content1_33);
select1.appendChild(option1_33);
var option1_34 = document.createElement('option');
if (tab[2]==34) {
option1_34.setAttribute('selected','selected');
}
option1_34.setAttribute('value','34');
var content1_34 = document.createTextNode('34');
option1_34.appendChild(content1_34);
select1.appendChild(option1_34);
td1.appendChild(span1);
span1.appendChild(text1);
td1.appendChild(select1);
}

08/03/2006, 13h03
Jherek

Y-a-t-il une possiblité de contournement, genre modifier le method du form pour renvoyer vers une fonction javascript qui recupererait toutes les valeurs des élements de formulaire générés par DOM pour les ajouter à l'URL ?
08/03/2006, 16h36
Jherek

J'ai déclaré mon form avec un attribut name alors que mes éléments générés par DOM ont des attributs id. Ca peut jouer ?
08/03/2006, 17h20
Jherek

Bon, ça devient bizarre : d'après le DOM Inspector de FireFox, les éléments générés par DOM font bien partie de mon formulaire : non seulement ils apparaissent au bon endroit dans l'arborescence, mais en plus leur propriété "form" est bien "restartForm". Mais malgré tout, rien dans les paramètres de l'URL. J'ai fait une version raccourcie de ma page, afin d'etre sur que l'URL ne dépasse pas les 255 caractères théoriquement maximals, mais effectivement, il n'y a vraiment rien. Ca devient énigmatique. Has anyone a clue ?

Pour info, j'ai fini par trouver une solution, hier :

J'ai écrit une fonction javascript qui récupère les éléments du formulaire et génère l'URL vers laquelle on fait ensuite une redirection.

Ca donne ça :
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 function send() { var len = listElem.length; urlParam = new Array(); var len3 = document.restartForm.elements.length; for(i=0;i<len3;i++) { var elem = document.restartForm.elements[i]; if (elem.type!="radio") { if (elem.name!="") { urlParam.push(elem.name+"="+elem.value); } else { urlParam.push(elem.id+"="+elem.value); } } } for (i=0;i<5;i++) { if (document.forms.restartForm.restartType[i].checked == true) { urlParam.push("restartType="+document.forms.restartForm.restartType[i].value); } } var url = "servlet/RestartValidationServlet?"+urlParam.join("&"); window.location.href = url; }
A noter la petite boucle pour traiter les radio-boutons (on ne récupère pas la value directement, sinon, on se retrouve avec dans l'URL un paramètre par radio-bouton, au lieu d'un seul parametre pour le bouton coché.

S'il y en a que ça peut aider...

Dire qu'il y a un mois de ça, j'avais quasiment jamais fait de Javascript... :-)