## Form Repeater Documentation

#### jQuery Repeater

Repeater creates an interface to add and remove a repeatable group of input elements. It uses the first "data-repeater-item" as a template for added items. It rewrites your name attributes to avoid collisions within the same form. (since the name attributes will be repeated). the name attributes would be renamed `group-a[0][text-input] and group-a[1][text-input]`.

Checkbox inputs and Multiple Select inputs will have an additional [] appended. So for example a checkbox with name `foo` would be mapped to `group-a[0][foo][]`.

Names get reindexed if an item is added or deleted.

###### 1. Initialize the plugin by referencing the necessary files:

                        <script src="jquery.repeater.js"></script>

###### 2. The component will bind to any existing DOM element.

                        <form class="repeater">

                            <div data-repeater-list="group-a">
                                <div data-repeater-item>
                                    <input type="text" name="text-input" value="A"/>
                                    <input data-repeater-delete type="button" value="Delete"/>
                                </div>
                                <div data-repeater-item>
                                    <input type="text" name="text-input" value="B"/>
                                    <input data-repeater-delete type="button" value="Delete"/>
                                </div>
                            </div>
                            <input data-repeater-create type="button" value="Add"/>
                        </form>

###### 3. How to use.

                        $('.repeater').repeater({
                            // (Optional)
                            // 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,
                            // (Optional)
                            // "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'
                            },
                            // (Optional)
                            // "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();
                            },
                            // (Optional)
                            // "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);
                                }
                            },
                            // (Optional)
                            // 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);
                            },
                            // (Optional)
                            // Removes the delete button from the first list item,
                            // defaults to false.
                            isFirstItemUndeletable: true
                        });

Refer following links for detailed documentation, configuration options, methods and examples:

Type | URL
--- | ---
Plugin Link | https://github.com/DubFriend/jquery.repeater
Template Page | https://pixinvent.com/bootstrap-admin-template/robust/html/ltr/vertical-menu-template/form-repeater.html