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
Classic Form Repeater https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/form-repeater.html
Material Form Repeater https://demos.pixinvent.com/modern-html-admin-template/html/ltr/material-vertical-menu-template/form-repeater.html