Récupération éléments d'un formulaire dynamique en utilisant POST (DOM utilisé)

**Lyuna** · 14/11/2011, 18h31

Bonjour à tous !

Je n'arrive pas à récupérer mon formulaire dynamique via POST alors que j'ai bien ajouté mes éléments à la hiérarchie du document.
Petites explications : J'ai un formulaire qui permet de remplir une ligne d'un tableau. On remplit le formulaire donc à chaque fois que l'on souhaite ajouter une ligne au tableau. C'est ce tableau qui est ensuite envoyé via la méthode POST.

Ma page HTML :

Code html :

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
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Formulaire RUN</title>
<link rel="stylesheet" type="text/css" href="style_form.css">
<script src="validate.js"></script>
</head>
<body>
 
	<form id="formulaire" onreset="enableFCID(this)">
 
		<H1>Soumission d'un nouveau run</H1>		
 
		<table class="form">
 
			<tr>
				<td>Identifiant FC :</td>
				<td><INPUT TYPE="text" NAME="fcid" SIZE=25
					onblur="noNull(this)"> *</td>
			</tr>
 
			<tr>
				<td>Ligne numéro :</td>
				<td><select name="line">
						<option value="1">1</option>
						<option 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>
				</select></td>
			</tr>
 
			<tr>
				<td>Identifiant de l'échantillon :</td>
				<td><INPUT TYPE="text" NAME="echantillon" SIZE=25 value=""
					onblur="noNull(this)"> *</td>
			</tr>
 
			<tr>
				<td>Organisme :<br />
				</td>
				<td><select name="orga">
						<option value="human">Human</option>
						<option value="mouse">Mouse</option>
						<option value="rat">Rat</option>
				</select></td>
			</tr>
			<tr>
				<td>Index :<br /> (Lettres acceptées : A, C, G ou T)
				</td>
				<td><INPUT TYPE="text" NAME="index" SIZE=25 value=""
					onblur="checkIndex(this)"></td>
			</tr>
			<tr>
				<td>Contrôle :</td>
				<td><INPUT TYPE="radio" NAME="control" VALUE="Y"> Yes <input
					type="radio" NAME="control" checked VALUE="N"> No</td>
			</tr>
			<tr>
				<td>Recette :</td>
				<td><INPUT TYPE="text" NAME="recipe" SIZE=25 value="">
				</td>
			</tr>
 
 
			<tr>
				<td>Opérateur :</td>
				<td><INPUT TYPE="text" NAME="operator" SIZE=25 value=""
					onblur="noNull(this)"> *</td>
			</tr>
			<tr>
				<td>Description :</td>
				<td><textarea NAME="description" cols="20" rows="4"></textarea></td>
			</tr>
 
			<tr>
				<td class=red>* champs obligatoires</td>
			<tr>
			<tr>
				<td></td>
				<td><INPUT TYPE="button" VALUE="Ajouter"
					onclick="ajoute_ligne(document.forms['formulaire'])"> <INPUT
					TYPE="reset" VALUE="Effacer"></td>
			</tr>
 
 
		</table>
 
	</form>
 
	<br />
	<br />
 
	<form id="tableau" hidden="true" action="csv_creator.pl" method=POST>
 
		<table class="default">
			<thead>
				<TR>
					<TH>FCID</TH>
					<TH>Lane</TH>
					<TH>SampleID</TH>
					<TH>SampleRef</TH>
					<TH>Index</TH>
					<TH>Description</TH>
					<TH>Control</TH>
					<TH>Recipe</TH>
					<TH>Operator</TH>
					<TH>SampleProject</TH>
				</TR>
			</thead>
			<tbody id ="result"></tbody>
			<tr> <td><INPUT class="input" TYPE="submit" VALUE="Valider"> </td></tr>
		</table>		
	</form>
</body>
</html>

Mon code javascript (dans validate.js) :

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
 
	//Verification formulaire
	function surligne(champ, erreur) {
		if (erreur)
			champ.style.backgroundColor = "#fba";
		else
			champ.style.backgroundColor = "";
	}
 
	function noNull(champ) {	
		if (champ.value.length == 0) {
			surligne(champ, true);
			return false;
		} else {
			surligne(champ, false);
			return true;
		}
	}
 
	function checkIndex(champ) {
		var regex = /^[ACGT]*$/;
		if (!regex.test(champ.value)) {
			surligne(champ, true);
			return false;
		} else {
			surligne(champ, false);
			return true;
		}
	}
 
	function checkForm(f) {
		var index = checkIndex(f.index);
		var fcid = noNull(f.fcid);
		var ech = noNull(f.echantillon);
		var op = noNull(f.operator);
 
		if (index && fcid && ech && op) {
			return true;
		} else {
			alert("Veuillez remplir correctement tous les champs");
			return false;
		}
	}
 
 
//Ajout dynamique du tableau
	var numchamp = 1;
	function creeLigne(emplacement) {
		elem = document.createElement("tr");
		elem.id = "lig" + numchamp;
		return emplacement.appendChild(elem);
	}
 
	function creeCellule(ligne, champ, id) {
		elem = document.createElement("td");		
		var cellule = ligne.appendChild(elem);
		var nouveauInput = document.createElement('input');
 
		nouveauInput.name = id;
		nouveauInput.type = 'text';
		nouveauInput.size = '9';
		nouveauInput.setAttribute("class", 'text');
		nouveauInput.setAttribute("value", champ);		
		nouveauInput.disabled = 'true';		
		cellule.appendChild(nouveauInput);
 
	}
 
	function creeCelluleBouton(ligne, numchamp, attr) {
		elem = document.createElement("td");	
		elem.setAttribute("class", attr);
		var cellule = ligne.appendChild(elem);
		var nouveauInput = document.createElement('input');
 
		nouveauInput.type = 'button';
		nouveauInput.setAttribute("value", "Supprimer la ligne");
		nouveauInput.setAttribute("onclick", 'supLigne("'+ numchamp + '")');		
		cellule.appendChild(nouveauInput);		
	}
 
 
	function ajoute_ligne(f) {
		var form = checkForm(f);
 
		if (form) {				
			document.forms['tableau'].hidden = false;
			//recuperation du tableau
			var emplacement = document.getElementById("result");
			//-- création d'une ligne ----------
			var ligne = creeLigne(emplacement);
 
			//-- création des cellules ----------			
			creeCellule(ligne, f.fcid.value, 'fcid_'+numchamp);
			f.fcid.disabled = true;
			creeCellule(ligne, f.line.value, 'line_'+numchamp);
 
			var options = f.line.options;
			for (var i = 0; i < 7; i++) {				
				if (options[i].selected) {
					//les options commencent a 1
					var op = parseInt(options[i].value);
					options[op].selected = true;
					break;
				}
			}
 
			creeCellule(ligne, f.echantillon.value, 'ech_'+numchamp);
			f.echantillon.value = "";
			creeCellule(ligne, f.orga.value, 'orga_'+numchamp);
			creeCellule(ligne, f.index.value, 'index_'+numchamp);
			f.index.value = "";
			creeCellule(ligne, f.description.value, 'descr_'+numchamp);
			f.description.value = "";
 
			//radio			
			for (var i = 0; i < 2; i++) {
				if (f.control[i].checked)
					creeCellule(ligne, f.control[i].value);
			}
			creeCellule(ligne, f.recipe.value, 'recipe_'+numchamp);
			creeCellule(ligne, f.operator.value, 'op_'+numchamp);
			creeCellule(ligne, "FC", 'fc_'+numchamp);
 
			creeCelluleBouton(ligne, numchamp , "bouton");
 
			numchamp++;
		}
	}
 
	function supLigne(numero) {
		var emplacement = document.getElementById("result");
		var ligne = emplacement.getElementsByTagName("tr");
		emplacement.removeChild(ligne["lig" + numero]);
	}
 
	function enableFCID(f) {		
		f.fcid.disabled = false;
	}

Et pour ceux qui connaissent, le scipt de traitement en perl. A savoir qu'il fonctionne très bien si je le teste sur un formulaire codé en "dur" (csv_creator.pl)

Code perl :

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
 
#!/usr/bin/perl
 
# récupère  l'entrée standard dans la variable $in
read(STDIN, $in, $ENV{CONTENT_LENGTH});
 
# la chaine $in est coupée suivant le caractère & et crée la liste @champs
@champs = split(/&/,$in);
 
# traitement de chaque élément $e de la liste @champs
foreach $e (@champs) {
  # dissocie chaque élément, de la forme nom=valeur, 
  # en une paire de variable (nom,valeur)
  ($nom, $valeur) = split(/=/,$e);
 
  # transforme tous les caractères saisis en minuscules
  $valeur =~  tr/A-Z/a-z/;
 
  # crée à partir du tableau @champs, 
  # une liste associative %champs
  $champs{$nom}=$valeur;
}
# génére l'en-tête du document HTML renvoyé
print("Content-Type: text/html\n\n");
# puis le document HTML
print <<"SORTIE";
<HEAD><TITLE> Réponse </TITLE></HEAD>
<BODY>
<H2 ALIGN=CENTER>Réponse au questionnaire</H2>
<CENTER><TABLE BORDER><TR> <TH>Nom du champ <TH>Valeur</TR>
SORTIE
 
# le traitement est ici réduit à afficher les valeurs transmises
print "$in";
while (($nom, $valeur) = each(%champs)) {
      print "<TR><Td>$nom = </td><Td>$valeur</td></TR>";
}
print "</TABLE></CENTER></BODY>";

Voilà, si vous aviez une idée d'où provient le problème cela m'aiderait grandement :/

**Bovino** · 14/11/2011, 18h47

Les options de ton select n'ont pas de value...

**Lyuna** · 15/11/2011, 10h07

Voilà, je l'ai corrigé mais ça ne change rien, il refuse de transmettre le formulaire à mon script.
J'ai mis tout le code si jamais vous souhaitez le tester. Je pense que l'erreur ne peut que venir du javascript, non ?

**SpaceFrog** · 15/11/2011, 10h36

Code :

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

var nouveauInput = document.createElement('<input name="'+id+'"' >);

**Lyuna** · 15/11/2011, 11h02

Envoyé par SpaceFrog

Code :

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

var nouveauInput = document.createElement('<input name="'+id+'"' >);

Je viens de tester et dans ce cas, il ne me créé pas mes inputs donc pas mon tableau dynamique.

**SpaceFrog** · 15/11/2011, 11h05

il ne me créé pas mes inputs

Tu dois certainement mal l'implementer ...
http://www.developpez.net/forums/d53...ynamique-form/

**Lyuna** · 15/11/2011, 11h24

Envoyé par SpaceFrog

Tu dois certainement mal l'implementer ...
http://www.developpez.net/forums/d53...ynamique-form/

Heu, je ne comprends vraiment pas grand chose à ce que tu as fait. Et je ne vois pas comment "mieux" l'implémenter. Tu as vu mon code, j'ai simplement remplacé le "document.createElement('input');" par ce que tu m'as donné et du coup j'ai enlevé le "nouveauInput.name = id;"

Je ne vois pas comment je pourrais foirer ce simple changement

**SpaceFrog** · 15/11/2011, 11h29

Tu peux nous montrer ta nouvelle mouture de code pour le createElement jusqu'à l'append ... ?

**Lyuna** · 15/11/2011, 11h37

Oui bien sûr !

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
 
        var numchamp = 1;
	function creeLigne(emplacement) {
		elem = document.createElement("tr");
		elem.id = "lig" + numchamp;
		return emplacement.appendChild(elem);
	}
 
	function creeCellule(ligne, champ, id) {
		elem = document.createElement("td");		
		var cellule = ligne.appendChild(elem);
		var nouveauInput = document.createElement('<input name="'+id+'">');
 
		//nouveauInput.name = id;
		nouveauInput.type = 'text';
		nouveauInput.size = '9';
		nouveauInput.setAttribute("class", 'text');
 
                //Obligatoire comme ça car sinon il met seulement la valeur dans la case mais n'initialise pas l'attribut value à champ  
		nouveauInput.setAttribute("value", champ);	
		nouveauInput.disabled = 'true';		
		cellule.appendChild(nouveauInput);
 
	}
 
	function creeCelluleBouton(ligne, numchamp, attr) {
		elem = document.createElement("td");	
		elem.setAttribute("class", attr);
		var cellule = ligne.appendChild(elem);
		var nouveauInput = document.createElement('input');
 
		nouveauInput.type = 'button';
		nouveauInput.setAttribute("value", "Supprimer la ligne");
		nouveauInput.setAttribute("onclick", 'supLigne("'+ numchamp + '")');		
		cellule.appendChild(nouveauInput);		
	}
 
 
	function ajoute_ligne(f) {
		var form = checkForm(f);
 
		if (form) {				
			document.forms['tableau'].hidden = false;
			//recuperation du tableau
			var emplacement = document.getElementById("result");
 
			//-- création d'une ligne ----------
			var ligne = creeLigne(emplacement);
 
			//-- création des cellules ----------			
			creeCellule(ligne, f.fcid.value, 'fcid_'+numchamp);
			f.fcid.disabled = true;
			creeCellule(ligne, f.line.value, 'line_'+numchamp);
 
			var options = f.line.options;
			for (var i = 0; i < 7; i++) {				
				if (options[i].selected) {
					//les options commencent a 1
					var op = parseInt(options[i].value);
					options[op].selected = true;
					break;
				}
			}
 
			creeCellule(ligne, f.echantillon.value, 'ech_'+numchamp);
			f.echantillon.value = "";
			creeCellule(ligne, f.orga.value, 'orga_'+numchamp);
			creeCellule(ligne, f.index.value, 'index_'+numchamp);
			f.index.value = "";
			creeCellule(ligne, f.description.value, 'descr_'+numchamp);
			f.description.value = "";
 
			//radio			
			for (var i = 0; i < 2; i++) {
				if (f.control[i].checked)
					creeCellule(ligne, f.control[i].value);
			}
			creeCellule(ligne, f.recipe.value, 'recipe_'+numchamp);
			creeCellule(ligne, f.operator.value, 'op_'+numchamp);
			creeCellule(ligne, "FC", 'fc_'+numchamp);
 
			creeCelluleBouton(ligne, numchamp , "bouton");
 
			numchamp++;
		}
	}
 
	function supLigne(numero) {
		var emplacement = document.getElementById("result");
		var ligne = emplacement.getElementsByTagName("tr");
		emplacement.removeChild(ligne["lig" + numero]);
	}

**SpaceFrog** · 15/11/2011, 11h40

perso je n'utilise pas le setAttribute

Code :

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

nouveauInput.onclick= function(){supLigne(numchamp )};

**Bovino** · 15/11/2011, 11h41

du coup j'ai enlevé le "nouveauInput.name = id;"

Non, il faut le laisser au contraire

En fait, pour certaines versions d'IE, tu ne peux pas affecter le name à la volée et il faut donc passer par la syntaxe proposée par Spaffy, en revanche, les autres navigateurs n'acceptent pas tous cette syntaxe et pour eux, l'attribution se fera avec la ligne que tu as supprimée.

**Lyuna** · 15/11/2011, 11h53

Bon, j'ai décommenté le nouveauInput.name = id; et cela empêche toujours de créer le formulaire dynamique.

Il semblerait qu'il n'aime vraiment pas le document.createElement('<input name="'+id+'" >'); et ça l'empêche de créer son tableau.

Ah et le nouveauInput.onclick= function(){supLigne(numchamp )}; il me le souligne en jaune, il n'aime pas cette façon d'écrire.

J'aimerais quand même bien savoir pourquoi il refuse de mettre mon formulaire dynamique dans mon post.

**SpaceFrog** · 15/11/2011, 12h00

Ah et le nouveauInput.onclick= function(){supLigne(numchamp )}; il me le souligne en jaune, il n'aime pas cette façon d'écrire.

Heu tu utilises quoi comme editeur ??? ou debuggueur ?

**Lyuna** · 15/11/2011, 12h04

Envoyé par SpaceFrog

Heu tu utilises quoi comme editeur ??? ou debuggueur ?

Eclipse, j'ai le pluggin "web". Je n'ai pas trop le choix, je suis obligée d'être sous windows au boulot.

**Lyuna** · 15/11/2011, 16h26

Bon, je suppose que vous ne pouvez rien de plus pour moi. J'ai un peu l'impression d'être une merde à sécher sur un truc pareil mais je vais devoir restructurer complètement tout le formulaire même si je ne vois pas comment faire sans javascript, là

**Lyuna** · 22/11/2011, 09h47

Quelqu'un a fini par trouver le problème, donc je vous donne la réponse, ça peut toujours servir

En fait, c'était tout con : Mes input sont en disabled et quand c'est le cas, ils ne peuvent pas être passés en POST. A la place je les ai donc mis en readonly.

Bonne journée !

Récupération éléments d'un formulaire dynamique en utilisant POST (DOM utilisé)

JavaScript

Discussions similaires

Partager

Partager