[Formulaire] Ajout d'un champ par javascript

Bonjour à toutes et à tous,

Voilà, je suis entrain de développer un site web avec Joomla dans lequel se trouve un formulaire dans la partie intranet.

Dans un article, j'ai donc créé la structure du formulaire, cependant certains champs peuvent-être remplis plusieurs fois, et il n'y a pas de nombre prédéfini c'est au cas par cas.

C'est pourquoi j'ai ajouté un petit bouton "+" sous les champs qui peuvent être multiples et permettre à l'utilisateur d'en ajouter selon ses besoins.

J'ai parcouru le forum et recherché plusieurs solutions qui semblent fonctionnelles mais que je n'arrive pas à adapter à mon cas.

Je devrai le faire pour plusieurs champs mais pour l'instant j'essaie déjà sur un seul.

Pour que ce soit plus agréable visuellement j'ai intégré les éléments de mon formulaire dans un tableau dont voici le code(partie concernée aux lignes 192-206) :

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
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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
<form action="action.php" method="post">
	<p>
		&nbsp;</p>
	<tr1> </tr1>
	<div id="fields">
		&nbsp;</div>
	<table border="0" cellpadding="1" cellspacing="1" style="width: 70%;">
		<tbody>
			<tr>
				<td style="width: 224px;">
					<span style="font-family:lucida sans unicode,lucida grande,sans-serif;">Site &nbsp; &nbsp; &nbsp;<select name="site"></select></span></td>
				<td style="width: 223px;">
					<span style="font-family:lucida sans unicode,lucida grande,sans-serif;">Date &nbsp; &nbsp;&nbsp;</span><input maxlength="8" name="date" type="text" />
					<div>
						&nbsp;</div>
				</td>
				<td style="width: 216px;">
					&nbsp;</td>
				<td style="width: 219px;">
					&nbsp;</td>
			</tr>
			<tr>
				<td style="width: 224px;">
					<p>
						<span style="font-family:lucida sans unicode,lucida grande,sans-serif;">Visa &nbsp; &nbsp;&nbsp;<select name="visa"></select></span></p>
					<p>
						&nbsp;</p>
				</td>
				<td style="width: 223px;">
					&nbsp;</td>
				<td style="width: 216px;">
					&nbsp;</td>
				<td style="width: 219px;">
					&nbsp;</td>
			</tr>
			<tr>
				<td style="width: 224px;">
					<span style="font-family:lucida sans unicode,lucida grande,sans-serif;">Collaborateur</span></td>
				<td style="width: 223px;">
					<span style="font-family:lucida sans unicode,lucida grande,sans-serif;">Temps de travail&nbsp;</span></td>
				<td style="width: 216px;">
					<span style="font-family:lucida sans unicode,lucida grande,sans-serif;">Abscence</span></td>
				<td style="width: 219px;">
					&nbsp;</td>
			</tr>
			<tr>
				<td style="width: 224px;">
					<span style="font-family:lucida sans unicode,lucida grande,sans-serif;"><select name="collaborateur"></select></span></td>
				<td style="width: 223px;">
					<input name="tmps_travail" type="text" /><span style="font-family:lucida sans unicode,lucida grande,sans-serif;">&nbsp;&nbsp;</span></td>
				<td style="width: 216px;">
					<span style="font-family:lucida sans unicode,lucida grande,sans-serif;">&nbsp;&nbsp;</span><input name="abscence" type="checkbox" /></td>
				<td style="width: 219px;">
					&nbsp;</td>
			</tr>
			<tr>
				<td style="width: 224px;">
					<div>
						<input name="plus" type="button" value="+" /></div>
					<div>
						&nbsp;</div>
					<div>
						&nbsp;</div>
				</td>
				<td style="width: 223px;">
					&nbsp;</td>
				<td style="width: 216px;">
					&nbsp;</td>
				<td style="width: 219px;">
					&nbsp;</td>
			</tr>
			<tr>
				<td style="width: 224px;">
					<span style="font-family:lucida sans unicode,lucida grande,sans-serif;">Production</span></td>
				<td style="width: 223px;">
					<span style="font-family:lucida sans unicode,lucida grande,sans-serif;">Propre</span></td>
				<td style="width: 216px;">
					<span style="font-family:lucida sans unicode,lucida grande,sans-serif;">S-T</span></td>
				<td style="width: 219px;">
					<span style="font-family:lucida sans unicode,lucida grande,sans-serif;">Minage</span></td>
			</tr>
			<tr>
				<td style="width: 224px;">
					<span style="font-family:lucida sans unicode,lucida grande,sans-serif;"><select name="collaborateur"></select></span></td>
				<td style="width: 223px;">
					<input name="tmps_travail" type="text" /></td>
				<td style="width: 216px;">
					<input name="tmps_travail" type="text" /></td>
				<td style="width: 219px;">
					<span style="font-family:lucida sans unicode,lucida grande,sans-serif;">&nbsp;</span><input name="tmps_travail" type="text" /></td>
			</tr>
			<tr>
				<td style="width: 224px;">
					<div>
						<input name="plus" type="button" value="+" /></div>
					<div>
						&nbsp;</div>
					<div>
						&nbsp;</div>
				</td>
				<td style="width: 223px;">
					&nbsp;</td>
				<td style="width: 216px;">
					&nbsp;</td>
				<td style="width: 219px;">
					&nbsp;</td>
			</tr>
			<tr>
				<td style="width: 224px;">
					<span style="font-family:lucida sans unicode,lucida grande,sans-serif;">Vente</span></td>
				<td style="width: 223px;">
					<span style="font-family:lucida sans unicode,lucida grande,sans-serif;">Tiers</span></td>
				<td style="width: 216px;">
					<span style="font-family:lucida sans unicode,lucida grande,sans-serif;">Interne</span></td>
				<td style="width: 219px;">
					<span style="font-family:lucida sans unicode,lucida grande,sans-serif;">Quantit&eacute;</span></td>
			</tr>
			<tr>
				<td style="width: 224px;">
					<span style="font-family:lucida sans unicode,lucida grande,sans-serif;"><select name="collaborateur"></select></span></td>
				<td style="width: 223px;">
					<input name="tmps_travail" type="text" /></td>
				<td style="width: 216px;">
					<span style="font-family:lucida sans unicode,lucida grande,sans-serif;"><select name="collaborateur"></select></span></td>
				<td style="width: 219px;">
					<input name="tmps_travail" type="text" /></td>
			</tr>
			<tr>
				<td style="width: 224px;">
					<div>
						<span style="font-family:lucida sans unicode,lucida grande,sans-serif;"><input name="plus" type="button" value="+" /></span></div>
					<div>
						&nbsp;</div>
					<div>
						&nbsp;</div>
				</td>
				<td style="width: 223px;">
					&nbsp;</td>
				<td style="width: 216px;">
					&nbsp;</td>
				<td style="width: 219px;">
					&nbsp;</td>
			</tr>
			<tr>
				<td style="width: 224px;">
					<span style="font-family:lucida sans unicode,lucida grande,sans-serif;">Machine</span></td>
				<td style="width: 223px;">
					<span style="font-family:lucida sans unicode,lucida grande,sans-serif;">Temps</span></td>
				<td style="width: 216px;">
					<span style="font-family:lucida sans unicode,lucida grande,sans-serif;">Diesel</span></td>
				<td style="width: 219px;">
					&nbsp;</td>
			</tr>
			<tr>
				<td style="width: 224px;">
					<span style="font-family:lucida sans unicode,lucida grande,sans-serif;"><select name="collaborateur"></select></span></td>
				<td style="width: 223px;">
					<div>
						<span style="font-family:lucida sans unicode,lucida grande,sans-serif;"><input name="tmps_travail" type="text" /></span></div>
				</td>
				<td style="width: 216px;">
					<span style="font-family:lucida sans unicode,lucida grande,sans-serif;"><input name="tmps_travail" type="text" /></span></td>
				<td style="width: 219px;">
					&nbsp;</td>
			</tr>
			<tr>
				<td style="width: 224px;">
					<div>
						<span style="font-family:lucida sans unicode,lucida grande,sans-serif;"><input name="plus" onclick="addField()" type="button" value="+" /></span></div>
					<div>
						&nbsp;</div>
					<div>
						&nbsp;</div>
				</td>
				<td style="width: 223px;">
					&nbsp;</td>
				<td style="width: 216px;">
					&nbsp;</td>
				<td style="width: 219px;">
					&nbsp;</td>
			</tr>
			<tr>
				<td style="width: 224px;">
					<span style="font-family:lucida sans unicode,lucida grande,sans-serif;">Autres fournitures</span></td>
				<td style="width: 223px;">
					&nbsp;</td>
				<td style="width: 216px;">
					&nbsp;</td>
				<td style="width: 219px;">
					&nbsp;</td>
			</tr>
			<tr id=fields>
				<td style="width: 224px;">
						<span style="font-family:lucida sans unicode,lucida grande,sans-serif;"><input name="fournitures" type="text" /></span>
				</td>
				<td style="width: 223px;">
					&nbsp;</td>
				<td style="width: 216px;">
					&nbsp;</td>
				<td style="width: 219px;">
					&nbsp;</td>
			</tr>
			<tr>
				<td style="width: 224px;">
					<p>
						<span style="font-family:lucida sans unicode,lucida grande,sans-serif;"><input name="plus" onclick="addField" type="button" value="+" /></span></p>
					<p>
						&nbsp;</p>
				</td>
				<td style="width: 223px;">
					&nbsp;</td>
				<td style="width: 216px;">
					&nbsp;</td>
				<td style="width: 219px;">
					&nbsp;</td>
			</tr>
			<tr>
				<td style="width: 224px;">
					<span style="font-family:lucida sans unicode,lucida grande,sans-serif;">Remarques</span></td>
				<td style="width: 223px;">
					&nbsp;</td>
				<td style="width: 216px;">
					&nbsp;</td>
				<td style="width: 219px;">
					&nbsp;</td>
			</tr>
			<tr>
				<td colspan="3" style="width: 224px;">
					<div>
						&nbsp;</div>
					<div>
						<span style="font-family:lucida sans unicode,lucida grande,sans-serif;"><input name="remarques" style="width: 500px; height: 300px;" type="text" /></span></div>
					<div>
						&nbsp;</div>
				</td>
				<td style="width: 223px;">
					&nbsp;</td>
			</tr>
			<tr>
				<td style="width: 224px;">
					<span style="font-family:lucida sans unicode,lucida grande,sans-serif;">&nbsp; &nbsp; &nbsp;<input type="submit" value="Envoyer" /></span></td>
				<td style="width: 223px;">
					&nbsp;</td>
				<td style="width: 216px;">
					&nbsp;</td>
				<td style="width: 219px;">
					&nbsp;</td>
			</tr>
		</tbody>
	</table>
</form>

Et voici le javascript que j'ai tenté de mettre en place sans résultat :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script language="JavaScript">
 function addField(){
    var field = "			<tr>
				<td style="width: 224px;">
						<span style="font-family:lucida sans unicode,lucida grande,sans-serif;"><input name="fournitures" type="text" /></span>
				</td>
				<td style="width: 223px;">
					&nbsp;</td>
				<td style="width: 216px;">
					&nbsp;</td>
				<td style="width: 219px;">
					&nbsp;</td>
			</tr>";
    document.getElementById('fields').innerHTML += field;
}
 
</script>

Je ne m'y connais absolument pas en javascript mais j'ai essayé d'adapter le code trouvé sur un des sujets du forum mais sans succès, c'est pourquoi je demande votre aide.

Voici une photo du formulaire pour avoir une idée plus concrète :

http://hpics.li/e1fc395

Merci d'avance pour votre aide!

B.