Logo

Form Repeater Example


                            <div class="card card-custom">
                                <div class="card-header">
                                    <div class="row">
                                        <h3 class="card-title">
                                            Form Repeater Example
                                        </h3>
                                    </div>
                                </div>
                                <!--begin::Form-->
                                <form class="form">
                                    <div class="card-body">
                                        <div class="form-group row">
                                            <label class="col-lg-2 col-form-label text-right">Full Name:</label>
                                            <div class="col-lg-4">
                                                <input type="email" class="form-control" placeholder="Enter full name"/>
                                                <span class="form-text text-muted">Please enter your full name</span>
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-lg-2 col-form-label text-right">Email address:</label>
                                            <div class="col-lg-4">
                                                <input type="email" class="form-control" placeholder="Enter email"/>
                                                <span class="form-text text-muted">We'll never share your email with anyone else</span>
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-lg-2 col-form-label text-right">Contact</label>
                                            <div class="col-lg-4">
                                                <div class="input-group">
                                                    <div class="input-group-prepend"><span class="input-group-text"><i class="la la-chain"></i></span></div>
                                                    <input type="text" class="form-control" placeholder="Phone number"/>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group row align-items-center">
                                            <label class="col-lg-2 col-form-label text-right">Communication:</label>
                                            <div class="col-xl-8 col-lg-8 col-sm-12 col-md-12 d-flex align-items-center">
                                                <div class="checkbox-inline">
                                                    <label class="checkbox">
                                                        <input type="checkbox"/> Email
                                                        <span></span>
                                                    </label>
                                                    <label class="checkbox">
                                                        <input type="checkbox"/> SMS
                                                        <span></span>
                                                    </label>
                                                    <label class="checkbox">
                                                        <input type="checkbox"/> Phone
                                                        <span></span>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="separator separator-dashed my-8"></div>

                                        <div id="kt_repeater_1">
                                            <div class="form-group row" id="kt_repeater_1">
                                                <label class="col-lg-2 col-form-label text-right">Contacts:</label>
                                                <div data-repeater-list="" class="col-lg-10">
                                                    <div data-repeater-item class="form-group row align-items-center">
                                                        <div class="col-md-3">
                                                            <label>Name:</label>
                                                            <input type="email" class="form-control" placeholder="Enter full name"/>
                                                            <div class="d-md-none mb-2"></div>
                                                        </div>
                                                        <div class="col-md-3">
                                                            <label>Number:</label>
                                                            <input type="email" class="form-control" placeholder="Enter contact number"/>
                                                            <div class="d-md-none mb-2"></div>
                                                        </div>
                                                        <div class="col-md-2">
                                                            <div class="radio-inline">
                                                                <label class="checkbox checkbox-success">
                                                                    <input type="checkbox"/> Primary
                                                                    <span></span>
                                                                </label>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-4">
                                                            <a href="javascript:;" data-repeater-delete="" class="btn btn-sm font-weight-bolder btn-light-danger">
                                                                <i class="la la-trash-o"></i>Delete
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <label class="col-lg-2 col-form-label text-right"></label>
                                                <div class="col-lg-4">
                                                    <a href="javascript:;" data-repeater-create="" class="btn btn-sm font-weight-bolder btn-light-primary">
                                                        <i class="la la-plus"></i>Add
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-footer">
                                        <div class="row">
                                            <div class="col-lg-2"></div>
                                            <div class="col-lg-2">
                                                <button type="reset" class="btn font-weight-bold btn-success mr-2">Submit</button>
                                                <button type="reset" class="btn font-weight-bold btn-secondary">Cancel</button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                                <!--end::Form-->
                            </div>
                        

                        // Class definition
                        var KTFormRepeater = function() {

                            // Private functions
                            var demo1 = function() {
                                $('#kt_repeater_1').repeater({
                                    initEmpty: false,

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

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

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

                            return {
                                // public functions
                                init: function() {
                                    demo1();
                                }
                            };
                        }();

                        jQuery(document).ready(function() {
                            KTFormRepeater.init();
                        });

                        
Please enter your full name
We'll never share your email with anyone else

Form Repeater Example

Please enter your full name
We'll never share your email with anyone else
Add

                                    <div class="card card-custom">
                                        <div class="card-header">
                                            <div class="row">
                                                <h3 class="card-title">
                                                    Form Repeater Example
                                                </h3>
                                            </div>
                                        </div>
                                        <!--begin::Form-->
                                        <form class="form">
                                            <div class="card-body">
                                                <div class="form-group row">
                                                    <label class="col-lg-3 col-form-label text-right">Full Name:</label>
                                                    <div class="col-lg-6">
                                                        <input type="email" class="form-control" placeholder="Enter full name"/>
                                                        <span class="form-text text-muted">Please enter your full name</span>
                                                    </div>
                                                </div>
                                                <div class="form-group row">
                                                    <label class="col-lg-3 col-form-label text-right">Email address:</label>
                                                    <div class="col-lg-6">
                                                        <input type="email" class="form-control" placeholder="Enter email"/>
                                                        <span class="form-text text-muted">We'll never share your email with anyone else</span>
                                                    </div>
                                                </div>
                                                <div class="form-group row align-items-center">
                                                    <label class="col-lg-3 col-form-label text-right">Communication:</label>
                                                    <div class="col-lg-12 col-xl-8">
                                                        <div class="checkbox-inline">
                                                            <label class="checkbox">
                                                                <input type="checkbox"/> Email
                                                                <span></span>
                                                            </label>
                                                            <label class="checkbox">
                                                                <input type="checkbox"/> SMS
                                                                <span></span>
                                                            </label>
                                                            <label class="checkbox">
                                                                <input type="checkbox"/> Phone
                                                                <span></span>
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="form-group row">
                                                    <label class="col-form-label text-right col-lg-3 col-sm-12">Credit Card</label>
                                                    <div class="col-lg-6 ">
                                                        <div class="input-group">
                                                            <input type="text" class="form-control" name="creditcard" placeholder="Enter card number"/>
                                                            <div class="input-group-append">
                                                                <span class="input-group-text"><i class="la la-credit-card"></i></span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div id="kt_repeater_2">
                                                    <div class="form-group row">
                                                        <label class="col-lg-3 col-form-label text-right">Contact:</label>
                                                        <div data-repeater-list="" class="col-lg-6">
                                                            <div data-repeater-item class="mb-2">
                                                                <div class="input-group">
                                                                    <div class="input-group-prepend">
                                                                        <span class="input-group-text">
                                                                            <i class="la la-phone"></i>
                                                                        </span>
                                                                    </div>
                                                                    <input type="text" class="form-control" placeholder="Enter telephone"/>
                                                                    <div class="input-group-append">
                                                                        <a href="javascript:;" class="btn font-weight-bold btn-danger btn-icon">
                                                                            <i class="la la-close"></i>
                                                                        </a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="form-group row">
                                                        <div class="col-lg-3"></div>
                                                        <div class="col">
                                                            <div data-repeater-create="" class="btn font-weight-bold btn-warning">
                                                                <i class="la la-plus"></i>
                                                                Add
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                            </div>
                                            <div class="card-footer">
                                                <div class="row">
                                                    <div class="col-lg-3"></div>
                                                    <div class="col-lg-6">
                                                        <button type="reset" class="btn font-weight-bold btn-primary mr-2">Submit</button>
                                                        <button type="reset" class="btn font-weight-bold btn-secondary">Cancel</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                        <!--end::Form-->
                                    </div>
                                

                                // Class definition
                                var KTFormRepeater = function() {

                                    // Private functions
                                    var demo2 = function() {
                                        $('#kt_repeater_2').repeater({
                                            initEmpty: false,

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

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

                                            hide: function(deleteElement) {
                                                if(confirm('Are you sure you want to delete this element?')) {
                                                    $(this).slideUp(deleteElement);
                                                }
                                            }
                                        });
                                    }
                                    return {
                                        // public functions
                                        init: function() {
                                            demo2();
                                        }
                                    };
                                }();

                                jQuery(document).ready(function() {
                                    KTFormRepeater.init();
                                });

                                

Form Repeater Example

Please enter your full name
We'll never share your email with anyone else
Add

                                    <div class="card card-custom">
                                        <div class="card-header">
                                            <div class="row">
                                                <h3 class="card-title">
                                                    Form Repeater Example
                                                </h3>
                                            </div>
                                        </div>
                                        <!--begin::Form-->
                                        <form class="form">
                                            <div class="card-body">
                                                <div class="form-group row">
                                                    <label class="col-lg-3 col-form-label text-right">Full Name:</label>
                                                    <div class="col-lg-6">
                                                        <input type="email" class="form-control" placeholder="Enter full name"/>
                                                        <span class="form-text text-muted">Please enter your full name</span>
                                                    </div>
                                                </div>
                                                <div class="form-group row">
                                                    <label class="col-lg-3 col-form-label text-right">Email address:</label>
                                                    <div class="col-lg-6">
                                                        <input type="email" class="form-control" placeholder="Enter email"/>
                                                        <span class="form-text text-muted">We'll never share your email with anyone else</span>
                                                    </div>
                                                </div>
                                                <div class="form-group row align-items-center">
                                                    <label class="col-lg-3 col-form-label text-right">Communication:</label>
                                                    <div class="col-lg-12 col-xl-8">
                                                        <div class="checkbox-inline">
                                                            <label class="checkbox">
                                                                <input type="checkbox"/> Email
                                                                <span></span>
                                                            </label>
                                                            <label class="checkbox">
                                                                <input type="checkbox"/> SMS
                                                                <span></span>
                                                            </label>
                                                            <label class="checkbox">
                                                                <input type="checkbox"/> Phone
                                                                <span></span>
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="form-group row">
                                                    <label class="col-form-label text-right col-lg-3 col-sm-12">Credit Card</label>
                                                    <div class="col-lg-6 ">
                                                        <div class="input-group">
                                                            <input type="text" class="form-control" name="creditcard" placeholder="Enter card number"/>
                                                            <div class="input-group-append"><span class="input-group-text"><i class="la la-credit-card"></i></span></div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div id="kt_repeater_3">
                                                    <div class="form-group row">
                                                        <label class="col-lg-3 col-form-label text-right">Contact:</label>
                                                        <div data-repeater-list="" class="col-lg-9">
                                                            <div data-repeater-item class="form-group row">
                                                                <div class="col-lg-5">
                                                                    <div class="input-group">
                                                                        <div class="input-group-prepend">
                                                                            <span class="input-group-text">
                                                                                <i class="la la-phone"></i>
                                                                            </span>
                                                                        </div>
                                                                        <input type="text" class="form-control" placeholder="Phone"/>
                                                                    </div>
                                                                </div>
                                                                <div class="col-lg-5">
                                                                    <div class="input-group">
                                                                        <div class="input-group-prepend">
                                                                            <span class="input-group-text">
                                                                                <i class="la la-envelope"></i>
                                                                            </span>
                                                                        </div>
                                                                        <input type="text" class="form-control" placeholder="Email"/>
                                                                    </div>
                                                                </div>
                                                                <div class="col-lg-2">
                                                                    <a href="javascript:;" data-repeater-delete="" class="btn font-weight-bold btn-danger btn-icon">
                                                                        <i class="la la-remove"></i>
                                                                    </a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="form-group row">
                                                        <div class="col-lg-3"></div>
                                                        <div class="col">
                                                            <div data-repeater-create="" class="btn font-weight-bold btn-primary">
                                                                <i class="la la-plus"></i>
                                                                Add
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="card-footer">
                                                <div class="row">
                                                    <div class="col-lg-3"></div>
                                                    <div class="col-lg-6">
                                                        <button type="reset" class="btn font-weight-bold btn-primary btn-shadow mr-2">Submit</button>
                                                        <button type="reset" class="btn font-weight-bold btn-secondary btn-shadow">Cancel</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                        <!--end::Form-->
                                    </div>
                                

                                // Class definition
                                var KTFormRepeater = function() {

                                    // Private functions
                                    var demo3 = function() {
                                        $('#kt_repeater_3').repeater({
                                            initEmpty: false,

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

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

                                            hide: function(deleteElement) {
                                                if(confirm('Are you sure you want to delete this element?')) {
                                                    $(this).slideUp(deleteElement);
                                                }
                                            }
                                        });
                                    }

                                    return {
                                        // public functions
                                        init: function() {
                                            demo3();
                                        }
                                    };
                                }();

                                jQuery(document).ready(function() {
                                    KTFormRepeater.init();
                                });


                                

Select A Demo