FormValidation creates an interface to add and remove a repeatable group of input elements. For more info see the official Github repository.
Advanced Example
$('#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>
<div 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-flex btn-sm btn-light-danger mt-3 mt-md-9">
<i class="ki-duotone ki-trash fs-3"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span></i>
Delete
</a>
</div>
</div>
</div>
</div>
</div>
<!--end::Form group-->
<!--begin::Form group-->
<div class="form-group">
<a href="javascript:;" data-repeater-create class="btn btn-flex btn-light-primary">
<i class="ki-duotone ki-plus fs-3"></i>
Add
</a>
</div>
<!--end::Form group-->
</div>
<!--end::Repeater-->
2024©
Keenthemes
