[Formulaire] Ajout d'un champ par javascript

**BATtheBARGE** · 14/08/2014, 11h34

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

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

**NoSmoking** · 26/08/2014, 18h02

Bonjour,
lourd � parier qu'en utilisant la fonction de recherche sur ce site tu trouveras une solution, probl�me maintes fois abord�.

http://www.developpez.com/recherche/...81j30538175j12

[Formulaire] Ajout d'un champ par javascript

JavaScript

Vue hybride

Discussions similaires

Partager

Partager