Javascript/DOM : problème de formulaire

**Jherek** · 08/03/2006, 11h44

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.

**Jherek** · 08/03/2006, 13h00

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 :

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
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);
}

**Jherek** · 08/03/2006, 13h03

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 ?

**Jherek** · 08/03/2006, 16h36

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 ?

**Jherek** · 08/03/2006, 17h20

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 ?

**Jherek** · 14/03/2006, 17h09

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 :

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

Javascript/DOM : problème de formulaire

JavaScript

Vue hybride

Discussions similaires

Partager

Partager