Javascript/DOM : problème de formulaire

**Jherek** · 06/03/2006, 19h25

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.

**spilliaert** · 06/03/2006, 19h55

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

**SpaceFrog** · 07/03/2006, 08h18

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

**Jherek** · 07/03/2006, 10h54

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 :

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

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 :

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

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

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 :

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

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

**denisC** · 07/03/2006, 11h44

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.

**Jherek** · 07/03/2006, 11h50

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

**SpaceFrog** · 07/03/2006, 11h59

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

jette un oeil ici

**denisC** · 07/03/2006, 12h30

Envoyé par Jherek

Code :

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

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.

**Jherek** · 07/03/2006, 14h00

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.

**SpaceFrog** · 07/03/2006, 14h05

tu as été voir mon lien ?

Code :

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

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

en ayant attrinbue un trucmachin à ton selectType ...

**denisC** · 07/03/2006, 14h10

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

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

**Jherek** · 07/03/2006, 14h34

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.

Je vais peut-etre repasser dessus si j'ai le temps...

**denisC** · 07/03/2006, 15h05

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

**Jherek** · 07/03/2006, 17h56

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.

**Jherek** · 07/03/2006, 18h46

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

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 :

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

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 ?

**m@t** · 07/03/2006, 21h43

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

**denisC** · 08/03/2006, 09h25

Envoyé par Jherek

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

Code :

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

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.

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

**denisC** · 08/03/2006, 09h26

Envoyé par Jherek

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

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?

**Jherek** · 08/03/2006, 09h53

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 :

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

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>

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

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 ?