Preview Purchase

Documentation v8.0.28

FormValidation creates an interface to add and remove a repeatable group of input elements. For more info see the official Github repository.

Advanced Example

Select Options:

Datepicker:

Tags:

tag1

tag2

tag3

Delete

Add

														JAVASCRIPT
													

														HTML
													

															$('#kt_docs_repeater_advanced').repeater({
    initEmpty: false,

    defaultValues: {
        'text-input': 'foo'
    },

    show: function () {
        $(this).slideDown();

        // Re-init select2
        $(this).find('[data-kt-repeater="select2"]').select2();

        // Re-init flatpickr
        $(this).find('[data-kt-repeater="datepicker"]').flatpickr();

        // Re-init tagify
        new Tagify(this.querySelector('[data-kt-repeater="tagify"]'));
    },

    hide: function (deleteElement) {
        $(this).slideUp(deleteElement);
    },

    ready: function(){
        // Init select2
        $('[data-kt-repeater="select2"]').select2();

        // Init flatpickr
        $('[data-kt-repeater="datepicker"]').flatpickr();

        // Init Tagify
        new Tagify(document.querySelector('[data-kt-repeater="tagify"]'));
    }
});
														

															<!--begin::Repeater-->
<div id="kt_docs_repeater_advanced">
    <!--begin::Form group-->
    <div class="form-group">
        <div data-repeater-list="kt_docs_repeater_advanced">
            <div data-repeater-item class="form-group row mb-5">
                <div class="col-md-3">
                    <label class="form-label">Select Options:</label>
                    <select class="form-select" data-kt-repeater="select2" data-placeholder="Select an option">
                        <option></option>
                        <option value="1">Option 1</option>
                        <option value="2">Option 2</option>
                        <option value="3">Option 3</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label">Datepicker:</label>
                    <input class="form-control" data-kt-repeater="datepicker" placeholder="Pick a date" />
                </div>
                <div class="col-md-4">
                    <label class="form-label">Tags:</label>
                    <input class="form-control" data-kt-repeater="tagify" value="tag1, tag2, tag3"/>
                </div>
                <div class="col-md-2">
                    <a href="javascript:;" data-repeater-delete class="btn btn-sm btn-light-danger mt-3 mt-md-9">
                        <i class="la la-trash-o fs-3"></i>Delete
                    </a>
                </div>
            </div>
        </div>
    </div>
    <!--end::Form group-->

    <!--begin::Form group-->
    <div class="form-group">
        <a href="javascript:;" data-repeater-create class="btn btn-light-primary">
            <i class="la la-plus"></i>Add
        </a>
    </div>
    <!--end::Form group-->
</div>
<!--end::Repeater-->
														

Getting Started

Base

Forms

Editors

Charts

General

Icons

Documentation v8.0.28

Advanced Example

Explore Metronic

Metronic Licenses

Metronic Demos

Getting Started

Base

Forms

Editors

Charts

General

Icons

No result found

Documentation v8.0.28

Advanced Example

Explore Metronic

Metronic Licenses

Metronic Demos