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();
});

User Profile 12 messages

James Jones
Application Developer
Recent Notifications
Another purpose persuade Due in 2 Days
+28%
Would be to people Due in 2 Days
+50%
-27%
The best product Due in 2 Days
+8%

Select A Demo