Impossible de soumettre Form Objets DOM

**riete** · 04/11/2008, 11h47

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

Code :

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

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 ?

**javatwister** · 04/11/2008, 11h51

a priori, inclus ton tableau dans le form;

**SpaceFrog** · 04/11/2008, 11h58

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

**riete** · 04/11/2008, 15h09

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.

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'

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.

**SpaceFrog** · 04/11/2008, 15h24

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

tu testes sous IE ???

**riete** · 05/11/2008, 10h27

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

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

**SpaceFrog** · 05/11/2008, 13h35

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

**riete** · 05/11/2008, 15h05

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

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 :

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

**javatwister** · 05/11/2008, 17h43

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;

**riete** · 06/11/2008, 08h58

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.

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 :

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

**javatwister** · 06/11/2008, 10h50

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

Code :

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

my_form.action = "self.location";

**riete** · 06/11/2008, 11h05

Envoyé par javatwister

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

Code :

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

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

**javatwister** · 06/11/2008, 11h11

alors je reviens à mon obsession:

tu crées d'abord ton form;

Code :

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

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 :

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

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;

**riete** · 06/11/2008, 14h34

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 :

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

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.

**E.Bzz** · 06/11/2008, 14h48

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

**riete** · 07/11/2008, 14h33

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+

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

**E.Bzz** · 07/11/2008, 14h49

Envoyé par riete

Je vais essayer d'être plus clair

Opération réussie

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

A+

**riete** · 07/11/2008, 15h14

Envoyé par E.Bzz

Opération réussie

je commençais à me poser des questions

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

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'

. Alors je me suis tourné vers la première méthode.

Envoyé par E.Bzz

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

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

**E.Bzz** · 07/11/2008, 15h28

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

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

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'

. Alors je me suis tourné vers la première méthode.

Non plus ... Re-

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

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+

**riete** · 07/11/2008, 17h23

On va peut être y arriver

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

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

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

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

Ais-je bien compris ?

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.

Impossible de soumettre Form Objets DOM

JavaScript

Discussions similaires

Partager

Partager