33 |
42 |
43 | jQuery Multifield Plugin
34 |A jQuery plugin which allows you to create dynamic field groups.
35 | 36 | 41 |
44 |
59 |
60 |
45 |
58 |
46 |
57 | Plugin Init
47 |
48 | <script>
49 | $('#wrapper').multifield({
50 | section: '.section',
51 | btnAdd:'.btnAdd',
52 | btnRemove:'.btnRemove'
53 | });
54 | </script>
55 |
56 |
61 |
109 |
110 |
62 |
108 |
63 |
65 |
66 |
106 |
107 | Plugin Options
64 || Option | 68 |Type | 69 |Default | 70 |Description | 71 |
|---|---|---|---|
| section | 76 |string | 77 |null | 78 |REQUIRED Selector of the section which is located inside of the parent wrapper | 79 |
| btnAdd | 82 |string | 83 |null | 84 |REQUIRED Selector of the "Add section" button - can be located everywhere on the page | 85 |
| btnRemove | 88 |string | 89 |null | 90 |REQUIRED Selector of the "Remove section" button - should be located INSIDE of the "section" | 91 |
| max | 94 |integer | 95 |0 | 96 |Maximum section | 97 |
| locale | 100 |string | 101 |'default' | 102 |Language to use, default is english | 103 |
111 |
146 |
147 |
112 |
145 |
113 |
144 | Basic usage #1 (HTML5 data-attribute options) SOURCE
114 | 115 |
116 |
143 |
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 |
148 |
166 |
167 |
149 |
150 |
151 |
152 |
165 |
153 |
154 |
155 |
156 |
157 |
158 |
159 |
160 |
161 |
162 |
163 |
164 |
168 |
206 |
207 |
169 |
205 |
170 |
204 | Basic usage #2 (JavaScript options) SOURCE
171 |
172 |
203 | 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 |
208 |
226 |
227 |
228 |
209 |
210 |
211 |
212 |
225 |
213 |
214 |
215 |
216 |
217 |
218 |
219 |
220 |
221 |
222 |
223 |
224 |
229 |
269 |
270 |
230 |
268 |
231 |
267 | Example #3 (The maximum sections count) SOURCE
232 |You can set maximum sections count via 'max' option.
233 |
234 |
266 | 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 |
271 |
289 |
290 |
272 |
273 |
274 |
275 |
288 |
276 |
277 |
278 |
279 |
280 |
281 |
282 |
283 |
284 |
285 |
286 |
287 |
291 |
338 |
339 |
292 |
337 |
293 |
336 | Example #4 (Localization) SOURCE
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 |
335 | 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 |
340 |
358 |
359 |
360 |
341 |
342 |
343 |
344 |
357 |
345 |
346 |
347 |
348 |
349 |
350 |
351 |
352 |
353 |
354 |
355 |
356 |
361 |
414 |
415 |
362 |
413 |
363 |
412 | Example #5 (Advanced) SOURCE
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 |
411 | 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 |
416 |
445 |
446 |
417 |
418 |
419 |
420 |
444 |
421 |
426 |
427 |
428 | Option 1
429 | Option 2
430 | Option 3
431 |
432 | 429 | Option 2
430 | Option 3
431 |
433 | 
435 |
436 | Image src will not be cleared
434 |
435 |
437 |
439 |
440 | Image src will be cleared
438 |
439 |
441 |
442 |
443 |
447 |
538 |
539 |
448 |
537 |
449 |
536 | Example #6 (Handling data with PHP) SOURCE
450 |
451 |
535 | 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 |
540 |
576 |
577 |
578 |
585 |
586 |
541 |
542 |
543 |
544 |
575 |
545 |
549 |
546 |
547 |
548 |
550 |
557 |
558 |
559 |
571 |
560 |
570 |
561 |
562 |
563 |
564 |
565 |
566 |
567 |
568 |
569 |
572 |
573 |
574 |