Repeatable Form Fields With Add/Remove Capabilities - jQuery Repeater
File Size: | 14 KB |
---|---|
Views Total: | 5308 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Repeater is a simple yet fully customizable jQuery plugin for duplicating a single or multiple (nested) form fields with add/remove capabilities.
Can be used to create a dynamic form for those who have to enter more information in additional form fields.
How to use it:
1. Load the main script jquery.repeater.min.js
after jQuery library.
<script src="/path/to/cdn/jquery.slim.min.js"></script> <script src="/path/to/jquery.repeater.min.js"></script>
2. Add the data-repeater-item
attribute to the repeatable form fields and define the base of rewritten name attributes in the data-repeater-list
attribute. In this example, the first data-repeater-item's name attribute would become jquery-script[0][text-input]
, and the second data-repeater-item would become jquery-script[1][text-input]
.
<form class="example"> <div data-repeater-list="jquery-script"> <div data-repeater-item> <input type="text" name="text-input" value="jQuery" /> </div> <div data-repeater-item> <input type="text" name="text-input" value="Script" /> </div> </div> </form>
3. Add Delete and Duplicate buttons to the form.
<form class="example"> <div data-repeater-list="jquery-script"> <div data-repeater-item> <input type="text" name="text-input" value="jQuery" /> <input data-repeater-delete type="button" value="Delete" /> </div> <div data-repeater-item> <input type="text" name="text-input" value="Script" /> <input data-repeater-delete type="button" value="Delete" /> </div> </div> <input data-repeater-create type="button" value="Add"/> </form>
4. Initialize the plugin and done.
$('.example').repeater({ // options here })
5. Nested form fields are supported as well.
<form class="example"> <div data-repeater-list="jquery-script"> <div data-repeater-item> <input type="text" name="text-input" value="jQuery" /> <input data-repeater-delete type="button" value="Delete" /> <div class="inner-repeater"> <div data-repeater-list="another-repeater"> <div data-repeater-item> <input type="text" name="inner-text-input" value="Script" /> <input data-repeater-delete type="button" value="Delete" /> </div> </div> <input data-repeater-create type="button" value="Add"/> </div> </div> </div> <input data-repeater-create type="button" value="Add"/> </form>
$('.example').repeater({ repeaters: [{ selector: '.inner-repeater' }] })
6. More configs & callbacks.
$('.example').repeater({ // start with an empty list of repeaters. Set your first (and only) // "data-repeater-item" with style="display:none;" and pass the // following configuration flag initEmpty: true, // "defaultValues" sets the values of added items. The keys of // defaultValues refer to the value of the input's name attribute. // If a default value is not specified for an input, then it will // have its value cleared. defaultValues: { 'text-input': 'foo' }, // Removes the delete button from the first list item isFirstItemUndeletable: false, // "show" is called just after an item is added. The item is hidden // at this point. If a show callback is not given the item will // have $(this).show() called on it. show: function () { $(this).slideDown(); }, // "hide" is called when a user clicks on a data-repeater-delete // element. The item is still visible. "hide" is passed a function // as its first argument which will properly remove the item. // "hide" allows for a confirmation step, to send a delete request // to the server, etc. If a hide callback is not given the item // will be deleted. hide: function (deleteElement) { if(confirm('Are you sure you want to delete this element?')) { $(this).slideUp(deleteElement); } }, // You can use this if you need to manually re-index the list // for example if you are using a drag and drop library to reorder // list items. ready: function (setIndexes) { $dragAndDrop.on('drop', setIndexes); }, })
This awesome jQuery plugin is developed by blpraveen. For more Advanced Usages, please check the demo page or visit the official website.