31 | 32 |
33 |

jQuery Multifield Plugin

34 |

A jQuery plugin which allows you to create dynamic field groups.

35 |

GitHub Page

36 |

37 | Star 38 | 39 | 40 |

41 |
42 | 43 |
44 |
45 |
46 |

Plugin Init

47 |
 48 | <script>
 49 | $('#wrapper').multifield({
 50 | 	section: '.section',
 51 | 	btnAdd:'.btnAdd',
 52 | 	btnRemove:'.btnRemove'
 53 | });
 54 | </script>
 55 | 
56 |
57 |
58 |
59 | 60 |
61 |
62 |
63 |

Plugin Options

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 |
OptionTypeDefaultDescription
sectionstringnullREQUIRED Selector of the section which is located inside of the parent wrapper
btnAddstringnullREQUIRED Selector of the "Add section" button - can be located everywhere on the page
btnRemovestringnullREQUIRED Selector of the "Remove section" button - should be located INSIDE of the "section"
maxinteger0Maximum section
localestring'default'Language to use, default is english
106 |
107 |
108 |
109 | 110 |
111 |
112 |
113 |

Basic usage #1 (HTML5 data-attribute options)

114 | 115 |
116 |
117 | <div id="example-1" class="content" data-mfield-options='{"section": ".group","btnAdd":"#btnAdd-1","btnRemove":".btnRemove"}'>
118 | 	<div class="row">
119 | 		<div class="col-md-12"><button type="button" id="btnAdd-1" class="btn btn-primary">Add section</button></div>
120 | 	</div>
121 | 	<div class="row group">
122 | 		<div class="col-md-2">
123 | 			<input class="form-control" type="text">
124 | 		</div>
125 | 		<div class="col-md-2">
126 | 			<input class="form-control" type="text">
127 | 		</div>
128 | 		<div class="col-md-4">
129 | 			<textarea></textarea>
130 | 		</div>
131 | 		<div class="col-md-3">
132 | 			<button type="button" class="btn btn-danger btnRemove">Remove</button>
133 | 		</div>
134 | 	</div>
135 | </div>
136 | 
137 |
138 | <script>
139 | $('#example-1').multifield();
140 | </script>
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 |

Basic usage #2 (JavaScript options)

171 |
172 |
173 | <div id="example-2" class="content">
174 | 	<div class="row">
175 | 		<div class="col-md-12"><button type="button" id="btnAdd-2" class="btn btn-primary">Add section</button></div>
176 | 	</div>
177 | 	<div class="row group">
178 | 		<div class="col-md-2">
179 | 			<input class="form-control" type="text">
180 | 		</div>
181 | 		<div class="col-md-2">
182 | 			<input class="form-control" type="text">
183 | 		</div>
184 | 		<div class="col-md-4">
185 | 			<textarea></textarea>
186 | 		</div>
187 | 		<div class="col-md-3">
188 | 			<button type="button" class="btn btn-danger btnRemove">Remove</button>
189 | 		</div>
190 | 	</div>
191 | </div>
192 | 
193 |
194 | <script>
195 | $('#example-2').multifield({
196 | 	section: '.group',
197 | 	btnAdd:'#btnAdd-2',
198 | 	btnRemove:'.btnRemove'
199 | });
200 | </script>
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 |

Example #3 (The maximum sections count)

232 |

You can set maximum sections count via 'max' option.

233 |
234 |
235 | <div id="example-3" class="content">
236 | 	<div class="row">
237 | 		<div class="col-md-12"><button type="button" id="btnAdd-3" class="btn btn-primary">Add section</button></div>
238 | 	</div>
239 | 	<div class="row group">
240 | 		<div class="col-md-2">
241 | 			<input class="form-control" type="text">
242 | 		</div>
243 | 		<div class="col-md-2">
244 | 			<input class="form-control" type="text">
245 | 		</div>
246 | 		<div class="col-md-4">
247 | 			<textarea></textarea>
248 | 		</div>
249 | 		<div class="col-md-3">
250 | 			<button type="button" class="btn btn-danger btnRemove">Remove</button>
251 | 		</div>
252 | 	</div>
253 | </div>
254 | 
255 |
256 | <script>
257 | $('#example-3').multifield({
258 | 	section: '.group',
259 | 	btnAdd:'#btnAdd-3',
260 | 	btnRemove:'.btnRemove',
261 | 	max: 3
262 | });
263 | </script>
264 | 
265 |
266 |
267 |
268 |
269 | 270 |
271 |
272 |
273 |
274 |
275 |
276 | 277 |
278 |
279 | 280 |
281 |
282 | 283 |
284 |
285 | 286 |
287 |
288 |
289 | 290 |
291 |
292 |
293 |

Example #4 (Localization)

294 |

You can translate confirmation message which appears on section remove.

295 |

To do so just pass an object with translated strings through the 'locale' option.

296 |
297 |
298 | <div id="example-4" class="content">
299 | 	<div class="row">
300 | 		<div class="col-md-12"><button type="button" id="btnAdd-4" class="btn btn-primary">Добавить</button></div>
301 | 	</div>
302 | 	<div class="row group">
303 | 		<div class="col-md-2">
304 | 			<input class="form-control" type="text">
305 | 		</div>
306 | 		<div class="col-md-2">
307 | 			<input class="form-control" type="text">
308 | 		</div>
309 | 		<div class="col-md-4">
310 | 			<textarea></textarea>
311 | 		</div>
312 | 		<div class="col-md-3">
313 | 			<button type="button" class="btn btn-danger btnRemove">Удалить</button>
314 | 		</div>
315 | 	</div>
316 | </div>
317 | 
318 |
319 | <script>
320 | $('#example-4').multifield({
321 | 	section: '.group',
322 | 	btnAdd:'#btnAdd-4',
323 | 	btnRemove:'.btnRemove',
324 | 	locale:{
325 |           "multiField": {
326 |             "messages": {
327 |               "removeConfirmation": "Вы уверены, что вы хотите удалить этот элемент?"
328 |             }
329 |           }
330 |         }
331 | });
332 | </script>
333 | 
334 |
335 |
336 |
337 |
338 | 339 |
340 |
341 |
342 |
343 |
344 |
345 | 346 |
347 |
348 | 349 |
350 |
351 | 352 |
353 |
354 | 355 |
356 |
357 |
358 | 359 | 360 |
361 |
362 |
363 |

Example #5 (Advanced)

364 |

365 | To use radio buttons you should add numeric value to their names, for example: name="group[0]" 366 |

367 |

Add "reset-image-src" class to image to reset image src

368 |
369 |
370 | <div id="example-5" class="content">
371 | 	<div class="row">
372 | 		<div class="col-md-12"><button type="button" id="btnAdd-5" class="btn btn-primary">Add section</button></div>
373 | 	</div>
374 | 	<div class="row group">
375 | 		<div class="col-md-2">
376 | 			<select name="select_example[]">
377 | 				<option value="1">Option 1</option>
378 | 				<option value="2">Option 2</option>
379 | 				<option value="3">Option 3</option>
380 | 			</select>
381 | 		</div>
382 | 		<div class="col-md-2">
383 | 			<input type="radio" name="radio_example[0]" value="1"> Option 1 <br>
384 | 			<input type="radio" name="radio_example[0]" value="2"> Option 2 <br>
385 | 			<input type="radio" name="radio_example[0]" value="3"> Option 3 <br>
386 | 		</div>
387 | 		<div class="col-md-3">
388 | 			<p>Image src will not be cleared</p>
389 | 			<img class="media-object" alt="64x64" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNGU0MzRkMDhhOCB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE0ZTQzNGQwOGE4Ij48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxNC41IiB5PSIzNi41Ij42NHg2NDwvdGV4dD48L2c+PC9nPjwvc3ZnPg=="  style="width: 64px; height: 64px;">
390 | 		</div>
391 | 		<div class="col-md-2">
392 | 			<p>Image src will be cleared</p>
393 | 			<img class="media-object reset-image-src" alt="Image" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNGU0MzRkMDhhOCB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE0ZTQzNGQwOGE4Ij48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxNC41IiB5PSIzNi41Ij42NHg2NDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" style="width: 64px; height: 64px;">
394 | 		</div>
395 | 		<div class="col-md-2">
396 | 			<button type="button" class="btn btn-danger btnRemove">Remove</button>
397 | 		</div>
398 | 	</div>
399 | </div>
400 | 
401 |
402 | <script>
403 | $('#example-5').multifield({
404 | 	section: '.group',
405 | 	btnAdd:'#btnAdd-5',
406 | 	btnRemove:'.btnRemove',
407 | });
408 | </script>
409 | 
410 |
411 |
412 |
413 |
414 | 415 |
416 |
417 |
418 |
419 |
420 |
421 | 426 |
427 |
428 | Option 1
429 | Option 2
430 | Option 3
431 |
432 |
433 |

Image src will not be cleared

434 | 64x64 435 |
436 |
437 |

Image src will be cleared

438 | Image 439 |
440 |
441 | 442 |
443 |
444 |
445 | 446 |
447 |
448 |
449 |

Example #6 (Handling data with PHP)

450 |
451 |
452 | <form method="post">
453 | <div id="example-6" class="content">
454 | 	<div class="row">
455 | 		<div class="col-md-12"><button type="button" id="btnAdd-6" class="btn btn-primary">Add Employee</button></div>
456 | 	</div>
457 | 	<div class="row group">
458 | 		<div class="col-md-2">
459 | 			<div class="form-group">
460 | 				<label>Name<input class="form-control" class="form-control" type="text" name="user_name[]"></label>
461 | 			</div>
462 | 		</div>
463 | 		<div class="col-md-2">
464 | 			<label>Gender
465 | 			<select name="user_gender[]" class="form-control">
466 | 				<option value="">Please select..</option>
467 | 				<option value="male">Male</option>
468 | 				<option value="female">Female</option>
469 | 			</select>
470 | 			</label>
471 | 		</div>
472 | 		<div class="col-md-4">
473 | 			<div class="col-md-2">
474 | 				<div class="radio">
475 | 					<label><input type="radio" name="user_role[0]" value="manager"> Manager </label>
476 | 				</div>
477 | 				<div class="radio">
478 | 					<label><input type="radio" name="user_role[0]" value="editor"> Editor </label>
479 | 				</div>
480 | 				<div class="radio">
481 | 					<label class="checkbox-inline"><input type="radio" name="user_role[0]" value="writer"> Writer </label>
482 | 				</div>
483 | 			</div>
484 | 		</div>
485 | 		<div class="col-md-3">
486 | 			<button type="button" class="btn btn-danger btnRemove">Remove</button>
487 | 		</div>
488 | 	</div>
489 | </div>
490 | </form>
491 | 
492 |
493 | <script>
494 | $('#example-6').multifield({
495 | 	section: '.group',
496 | 	btnAdd:'#btnAdd-6',
497 | 	btnRemove:'.btnRemove',
498 | });
499 | </script>
500 | 
501 |
502 | <?php var_dump($_POST); ?>
503 | 
504 | OUTPUT :
505 | 
506 |   'user_name' =>
507 |     array (size=5)
508 |       0 => string 'John Doe' (length=8)
509 |       1 => string 'Alice Smith' (length=11)
510 |       2 => string 'Jason Louis' (length=11)
511 |       3 => string 'Bob Freeman' (length=11)
512 |       4 => string 'Jane Watkins' (length=12)
513 |   'user_gender' =>
514 |     array (size=5)
515 |       0 => string 'male' (length=4)
516 |       1 => string 'female' (length=6)
517 |       2 => string 'male' (length=4)
518 |       3 => string 'male' (length=4)
519 |       4 => string 'female' (length=6)
520 |   'user_role' =>
521 |     array (size=5)
522 |       0 => string 'manager' (length=7)
523 |       1 => string 'editor' (length=6)
524 |       2 => string 'writer' (length=6)
525 |       3 => string 'writer' (length=6)
526 |       4 => string 'writer' (length=6)
527 | 
528 | // Get information about the first record
529 | $_POST['user_name'][0]; // John Doe
530 | $_POST['user_gender'][0]; // male
531 | $_POST['user_role'][0]; // manager
532 | 
533 | 
534 |
535 |
536 |
537 |
538 | 539 |
540 |
541 |
542 |
543 |
544 |
545 |
546 | 547 |
548 |
549 |
550 | 557 |
558 |
559 |
560 |
561 | 562 |
563 |
564 | 565 |
566 |
567 | 568 |
569 |
570 |
571 |
572 | 573 |
574 |
575 |
576 | 577 | 578 | 585 | 586 |