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