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/

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

JavaScript

Vue hybride

Discussions similaires

Partager

Partager