Impossible de soumettre Form Objets DOM

Version imprimable

04/11/2008, 11h47
riete

Impossible de soumettre Form Objets DOM

Un appel Ajax me retourne un formulaire qui est fabriqué avec des appels DOM. Du style:

Code:

new_Element = document.createElement('form');

Ce formulaire doit être sur la ligne d'une table. Si je crée l'élément formulaire au niveau <tr> et les éléments du formulaire dans chaque colonne <td>, le formulaire n'est pas soumis par une action submit.

Si par contre si je crée le formulaire et ses éléments dans la même colonne <td> il est soumis.

Je pense que le problème vient du fait que : dans le cas du formulaire dans une seul case, les éléments sont ajoutés au formulaire, alors que dans le cas du formulaire sur la ligne. Les éléments sont ajouté à chaque colonne <td>.

Comment doit je faire pour que les éléments de formulaire créés dans les colonnes puissent être des enfants du formulaire de la ligne ?

Pas facile à poser comme problème, j'espère que je me suis fait comprendre ? :?
04/11/2008, 11h51
javatwister

a priori, inclus ton tableau dans le form;
04/11/2008, 11h58
SpaceFrog

http://www.developpez.net/forums/d53...ynamique-form/
04/11/2008, 15h09
riete

Citation:

Envoyé par javatwister

a priori, inclus ton tableau dans le form;

Je ne suis pas certain de ce que tu veux me dire, mais hélas, faire cela en terme DOM n'est pas totalement trivial ;) Si tu as une truc, je suis preneur.

Citation:

Envoyé par SpaceFrog

http://www.developpez.net/forums/d53...ynamique-form/

Merci SpaceFrog, mais j'avais jusqu'à maintenant essayer d'éviter de me jeter dans ton code car il est assez 'toufu' :mrgreen: et je ne suis pas encore un expert en JS. J'y travaille mais la route est longue ;)

Par contre si tu n'y vois pas d'inconvénient, il se peut que je revienne pour avoir des éclaircissements.
04/11/2008, 15h24
SpaceFrog

si tu ne crées pas ton objet from selon la methode préconisée dans l'artcile ...

tu testes sous IE ???

Citation:

Envoyé par SpaceFrog

si tu ne crées pas ton objet from selon la methode préconisée dans l'artcile ...

tu testes sous IE ???

Je teste sous FF 2.

Je deviens fou avec ce truc.
Je me suis fait un petit bout de code pédagogique afin de bien comprendre le mécanisme. Mais même là le formulaire ne veut pas être soumis. Pourquoi ?
J'imagine que le problème est dû au fait que les éléments 'input' ne sont pas des enfants du 'form' ?
Si je les rends enfants du form, il n'apparaissent plus !!! :marteau:

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
<html>
<head>
<script type="text/javascript" language="javascript" charset="iso-8859-1">
 
	// creation d'un tableau avec form integre
	function make_form( fid, tid){
		// Table
		my_Table = document.createElement('table');
		my_Table.id = tid;
		my_Table.border = 1;
		document.body.appendChild(my_Table);
 
		// TR1
		my_tr = document.createElement('tr');
		my_Table.appendChild(my_tr);
 
			// form
 			my_form = document.createElement('form');
			my_form.id = fid;
			my_form.method = 'post';
 			my_tr.appendChild(my_form);
 
				// TD1
				my_td1 = document.createElement('td');
				my_tr.appendChild(my_td1);
 
					// input1
					tnode1 = document.createTextNode('input1 ');
					my_td1.appendChild(tnode1);
 
					my_input1 = document.createElement('input');
					my_input1.setAttribute('type','text');
					my_input1.setAttribute('name','text1');
					my_input1.setAttribute('value','Mon texte');
					my_td1.appendChild(my_input1);
 
				// TD2
				my_td2 = document.createElement('td');
				my_tr.appendChild(my_td2);
 
					// input2
					my_input2 = document.createElement('input');
					my_input2.setAttribute('type','submit');
					my_input2.setAttribute('name','ok');
					my_input2.setAttribute('value','ok');
					my_td2.appendChild(my_input2);
	}
 
</script>
</head>
<body>
	<input type="button" value="Make form table" onclick="make_form('f2', 't2');">
</body>
</html>

05/11/2008, 13h35
SpaceFrog

dans un tableau on appende dasn le thaed ou dans le tbody ...

ensuite setAttribute name = c'est mort

tu n'as pas du lire l'artcile ...

Citation:

Envoyé par SpaceFrog

dans un tableau on appende dasn le thaed ou dans le tbody ...

ensuite setAttribute name = c'est mort

tu n'as pas du lire l'artcile ...

Je viens de suivre tes conseils, j'ai enlevé les 'setAttribute name', j'ai créé une balise '<tbody>' dans laquelle j'ai append <form> et <tr>. Mais rien à faire, j'en perds mon Latin (qui est d'ailleurs presque inexistant).

8O Oh... que si, j'ai lu l'article, mais comme je l'ai dis plus haut. Afin de mieux comprendre le mécanisme, je me suis écrit ce code, car ton code est un peu rude pour un non averti ;)

Merci de ton aide en tous cas.

Le nouveau code modifié, mais toujours non opérationnel
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 function make_form( fid, tid){ // Table my_Table = document.createElement('table'); my_Table.id = tid; my_Table.border = 1; document.body.appendChild(my_Table); // tbody my_tbody = document.createElement('tbody'); my_Table.appendChild(my_tbody); // form my_form = document.createElement('form'); my_form.id = fid; my_form.method = 'post'; my_tbody.appendChild(my_form); // TR1 my_tr = document.createElement('tr'); my_tbody.appendChild(my_tr); // TD1 my_td1 = document.createElement('td'); my_tr.appendChild(my_td1); // input1 tnode1 = document.createTextNode('input1 '); my_td1.appendChild(tnode1); my_input1 = document.createElement('input'); my_input1.setAttribute('type','text'); my_input1.setAttribute('value','Mon texte'); my_td1.appendChild(my_input1); // TD2 my_td2 = document.createElement('td'); my_tr.appendChild(my_td2); // input2 my_input2 = document.createElement('input'); my_input2.setAttribute('type','submit'); my_input2.setAttribute('value','ok'); my_td2.appendChild(my_input2); }

05/11/2008, 17h43
javatwister

hors-sujet mais je continue à penser que le form doit en glober le tableau, non l'inverse, puisque de toute façon, les divers champs sont contenus dans plusieurs td;

il nous manque peut-être une partie intéressante du code, non? celle qui décide de la soumission du form;

Citation:

Envoyé par javatwister

hors-sujet mais je continue à penser que le form doit en glober le tableau, non l'inverse, puisque de toute façon, les divers champs sont contenus dans plusieurs td

Ecoute, je suis prêt à faire tous les tests que tu veux si cela peut me faire avancer.
J'ai mis en commentaire la ligne ou j'ai testé 'le formulaire qui englobe le tableau'. Mais cela ne change rien.

Je rappel que mon objectif est que ce formulaire se limite à une ligne, les autres lignes du tableau ne doivent pas être concernées. D'après ce que dit SpaceFrog, il faut englober la ligne est le formulaire dans un <tbody>, malgré cela ne fonctionne pas.

J'ai testé des dizaines de possibilités mais apparemment pas la bonne. :?

Citation:

Envoyé par javatwister

il nous manque peut-être une partie intéressante du code, non? celle qui décide de la soumission du form;

?? Je ne comprends pas bien ta remarque, il me semble que la soumission doit se faire avec le bouton submit (à moins que j'ai oubliais quelque chose).
Je dépose ma dernière version du code pour que ce soit plus clair.
Ce code réagit comme si le navigateur ne reconnait pas le formulaire. D'ailleurs dans FireBug, la balise form est en grisé.
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 <?php if($_POST){ print"<pre>"; print_r($_POST); print"</pre>"; } ?> <html> <head> <script type="text/javascript" language="javascript" charset="iso-8859-1"> function make_form( fid, tid){ // Table my_Table = document.createElement('table'); my_Table.id = tid; my_Table.border = 1; document.body.appendChild(my_Table); // tbody my_tbody = document.createElement('tbody'); my_Table.appendChild(my_tbody); // form my_form = document.createElement('form'); my_form.id = fid; my_form.method = 'post'; my_form.action = 'self.location.href'; my_tbody.appendChild(my_form); //document.body.appendChild(my_form); // TR1 my_tr = document.createElement('tr'); my_tbody.appendChild(my_tr); // TD1 my_td1 = document.createElement('td'); //my_form.appendChild(my_td1); my_tr.appendChild(my_td1); // input1 tnode1 = document.createTextNode('input1 '); my_td1.appendChild(tnode1); my_input1 = document.createElement('input'); my_input1.setAttribute('type','text'); my_input1.setAttribute('value','Mon texte'); my_td1.appendChild(my_input1); // TD2 my_td2 = document.createElement('td'); //my_form.appendChild(my_td2); my_tr.appendChild(my_td2); // input2 my_input2 = document.createElement('input'); my_input2.setAttribute('type','submit'); my_input2.setAttribute('value','ok'); my_td2.appendChild(my_input2); } </script> </head> <body bgcolor="#99CCFF"> <input type="button" value="Make form table" onclick="make_form('f2', 't2');"> </body> </html>

06/11/2008, 10h50
javatwister

peux-tu tenter de supprimer href dans la définition de l'action?

Code:

my_form.action = "self.location";
06/11/2008, 11h05
riete

Citation:

Envoyé par javatwister

peux-tu tenter de supprimer href dans la définition de l'action?

Code:

my_form.action = "self.location";

J'ai testé, cela ne change rien. Je pense que le problème vient de notions parent <-> Child que je gère mal (un peu Freudien mais ...) dans le code je précise ;)

D'autres propositions sont bienvenue. Merci

alors je reviens à mon obsession:

tu crées d'abord ton form;
Code:

1 2 3 4 5 my_form = document.createElement('form'); my_form.id = fid; my_form.method = 'post'; my_form.action = 'self.location.href'; document.body.appendChild(my_form);
puis ta structure de tableau:
Code:

1 2 3 4 5 6 7 my_Table = document.createElement('table'); my_Table.id = tid; my_Table.border = 1; my_form.appendChild(my_Table); my_tbody = document.createElement('tbody'); my_Table.appendChild(my_tbody);
puis ta ligne et tes cellules, lesquelles contiennent tes champs de formulaire;

06/11/2008, 14h34
riete

Je ne sais pas si tu as testé de ton coté, mais du miens, même motif, même punition.

Une petite précision, j'ai trouvé l'erreur pour l'affectation de l'action du formulaire, il fallait enlevé les guillemets.

Code:

my_form.action = self.location.href

Pour me dépanner, j'ai pour le moment réussit à créer un formulaire dans un <tr>, le problème c'est que l'ensemble des éléments est dans une seule cellule qui couvre tous le table.
06/11/2008, 14h48
E.Bzz

+1 pour Javatwister.

Il suffit que ta <table> soit incluse dans ton <form> (et non l'inverse).
(chaque élément du form devra être dans un <td> : aucun élément autorisé en dehors : pas de <tr><input...><td> par exemple)

Je vois pas ce qui te pose problème :?

A+
07/11/2008, 14h33
riete

Citation:

Envoyé par E.Bzz

+1 pour Javatwister.

Il suffit que ta <table> soit incluse dans ton <form> (et non l'inverse).
(chaque élément du form devra être dans un <td> : aucun élément autorisé en dehors : pas de <tr><input...><td> par exemple)

Je vois pas ce qui te pose problème :?

A+

:nono: je pense que mon problème est très mal énoncé, il faut que je revois ma copie.
Je suis d'accord avec vous le code proposé par Javatwister, tel qu'il est proposé fonctionne (je l'ai essayé). Mais comme je l'ai sûrement mal décris plus haut, mon problème est autre.

Le code que je donne en exemple essai simplement de mettre en évidence de façon simplifier un phénomène qui se produit sur un code plus important.

Je vais essayer d'être plus clair
Il faut imaginer une <table> qui contient X lignes et 6 colonnes, résultant d'une requête SQL. Le but est de donner la possibilité à l'utilisateur de pouvoir modifier le contenu d'une ligne tout en restant sur la page avec de l'Ajax.
Par un clic sur le bouton modif sur la ligne voulu, une nouvelle ligne se crée dans la <table> au dessus de la ligne concernée, on récupère les données concernées qui sont introduitent dans le fameux formulaire.

Donc, le formulaire n'englobe pas l'ensemble de la table mais doit simplement englober la ligne (le <tr>).
Voilà mon problème.

J'espère que je suis plus clair?

Ceci dit, je suis parvenu à un résultat en insérant un <tr> avec un <td colspan="6"> unique qui contient le formulaire. Mais le problème avec cette solution est l'aspect. Les différents champs du formulaire ne sont pas aligné verticalement avec colonnes correspondantes.
Merci
07/11/2008, 14h49
E.Bzz
Citation:

Envoyé par riete

Je vais essayer d'être plus clair

Opération réussie :ccool:

Je vois 2 solutions simples (perso je préfère la 1° ) :
- Puisque tu utilise Ajax, passe-toi de formulaire : tu récupères les données nécessaires (identifiables par la ligne qui reçoit le clic), puis tu constitues l'url Ajax en dynamique et l'appelle dans la foulée.
- Tu crées un seul formulaire masqué (pour tout le tableau), en position:absolute, que tu afficheras et positionneras au bon endroit lors du clic. Ne te reste qu'à l'alimenter avec les infos de la ligne cliquée et à le soumettre comme tu fais actuellement (Ajax ou pas)
Bref, pas besoin de "mixer" la structure d'un formulaire et celle de ton tableau :mrgreen:

A+
07/11/2008, 15h14
riete

Citation:

Envoyé par E.Bzz

Opération réussie :ccool:

8-) je commençais à me poser des questions ;)

Citation:

Envoyé par E.Bzz

Je vois 2 solutions simples (perso je préfère la 1° ) :
Puisque tu utilise Ajax, passe-toi de formulaire : tu récupères les données nécessaires (identifiables par la ligne qui reçoit le clic), puis tu constitues l'url Ajax en dynamique et l'appelle dans la foulée.

C'est exactement ce que j'ai fait. Mais une fois le résultat de la requête obtenu et injecté dans le formulaire de modification, qui lui même est introduit dans la nouvelle ligne de la table. Le bouton submit est totalement inopérant !! il est LA mon Problème

Citation:

Envoyé par E.Bzz

Tu crées un seul formulaire masqué (pour tout le tableau), en position:absolute, que tu afficheras et positionneras au bon endroit lors du clic. Ne te reste qu'à l'alimenter avec les infos de la ligne cliquée et à le soumettre comme tu fais actuellement (Ajax ou pas)[/LIST]

J'ai passé quelques heures aussi à me familiarisé avec une méthode qui doit être similaire 'obj.style.display='table-row' ou 'none' avec déplacement de la position de la ligne du formulaire caché devenu visible. Mais je trouvais comme toi que la première solution était plus 'librairisable' :aie:. Alors je me suis tourné vers la première méthode.

Citation:

Envoyé par E.Bzz

Bref, pas besoin de "mixer" la structure d'un formulaire et celle de ton tableau :mrgreen:

Donc en un mot ma question serait, est il possible de mixer ?
07/11/2008, 15h28
E.Bzz

Citation:

Envoyé par riete

C'est exactement ce que j'ai fait. Mais une fois le résultat de la requête obtenu et injecté dans le formulaire de modification, qui lui même est introduit dans la nouvelle ligne de la table. Le bouton submit est totalement inopérant !! il est LA mon Problème

Heu, oui mais ... non :aie:
Je parlais de remplacer ton formulaire par cette méthode (si des infos complémentaires doivent être saisies, elle peuvent l'être dans un input ne faisant pas partie d'un <form>)

Citation:

Envoyé par riete

J'ai passé quelques heures aussi à me familiarisé avec une méthode qui doit être similaire 'obj.style.display='table-row' ou 'none' avec déplacement de la position de la ligne du formulaire caché devenu visible. Mais je trouvais comme toi que la première solution était plus 'librairisable' :aie:. Alors je me suis tourné vers la première méthode.

Non plus ... Re-:aie:
Je parlais d'un div complètement indépendant de ta <table>, positionné en absolute et qui "apparait au-dessus" de l'emplacement nécessaire, lors du clic (ça peut être ailleurs que dans la table). Le même principe qu'une info-bulle, quoi ...

Citation:

Envoyé par riete

Donc en un mot ma question serait, est il possible de mixer ?

C'est une 3° solution, mais la pire, à mon avis ...

A+
07/11/2008, 17h23
riete

On va peut être y arriver :?

Citation:

Je parlais de remplacer ton formulaire par cette méthode (si des infos complémentaires doivent être saisies, elle peuvent l'être dans un input ne faisant pas partie d'un <form>)

Je crois que je viens de comprendre :P. Tu veux dire que sans formulaire, je déclenche sure la demande de validation des modif mon Appel Ajax et je récupère les valeurs par

Code:

var data = obj.elements[0].name + "=" + obj.elements[0].value;

Ais-je bien compris ?

Citation:

Je parlais d'un div complètement indépendant de ta <table>, positionné en absolute et qui "apparait au-dessus" de l'emplacement nécessaire, lors du clic (ça peut être ailleurs que dans la table). Le même principe qu'une info-bulle, quoi ...

Je crois comprendre aussi. merci pour ces explications. Le pb avec le div qui se déplace sur la zone, c'est que je perds l'effet sympa de la <table> qui s'ouvre pour laisser place une nouvelle ligne.
07/11/2008, 17h35
E.Bzz

Citation:

Envoyé par riete

Je crois que je viens de comprendre :P. Tu veux dire que sans formulaire, je déclenche sure la demande de validation des modif mon Appel Ajax et je récupère les valeurs par

Code:

var data = obj.elements[0].name + "=" + obj.elements[0].value;

Ais-je bien compris ?

Oui, sauf que dans ton tableau, ça sera certainement moins problématique d'y accéder par leurs ID ...

Citation:

Envoyé par riete

Le pb avec le div qui se déplace sur la zone, c'est que je perds l'effet sympa de la <table> qui s'ouvre pour laisser place une nouvelle ligne.

Oui, mais il devient visiblement moins sympa quand on commence à le coder :aie:

A+
12/11/2008, 08h56
riete

Citation:

Oui, mais il devient visiblement moins sympa quand on commence à le coder

C'est assez vrai :(

Je vais cloturer ce message pour le moment, merci à tous pour vos infos. J'ai déjà pas mal avancer, même si je n'ai toujours pas de réponse net à ma question.
Je vais donc contourner le problème en attendant mieux.

A+