<div class="card card-custom"> <div class="card-header"> <div class="row"> <h3 class="card-title"> تکرار فرم نمونه </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">نام خانوادگی:</label> <div class="col-lg-4"> <input type="email" class="form-control" placeholder="نام خانوادگی خود را وارد کنید"/> <span class="form-text text-muted">لطفا نام خانوادگی خود را وار کنید</span> </div> </div> <div class="form-group row"> <label class="col-lg-2 col-form-label text-right">آدرس الکترونیک:</label> <div class="col-lg-4"> <input type="email" class="form-control" placeholder="ایمیل را وارد کنید"/> <span class="form-text text-muted">لطفا یک ایمیل معتبر وارد کنید</span> </div> </div> <div class="form-group row"> <label class="col-lg-2 col-form-label text-right">مخاطب</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="شماره تلفن"/> </div> </div> </div> <div class="form-group row align-items-center"> <label class="col-lg-2 col-form-label text-right">ارتباطات:</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"/> پست الکترونیک <span></span> </label> <label class="checkbox"> <input type="checkbox"/> س م <span></span> </label> <label class="checkbox"> <input type="checkbox"/> تلفن <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">مخاطب:</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>نام:</label> <input type="email" class="form-control" placeholder="نام خانوادگی خود را وارد کنید"/> <div class="d-md-none mb-2"></div> </div> <div class="col-md-3"> <label>عدد:</label> <input type="email" class="form-control" placeholder="شماره مورد نظر را وارد کنید"/> <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"/> اولیه <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>حذف </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>افزودن </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">ارسال</button> <button type="reset" class="btn font-weight-bold btn-secondary">لغو</button> </div> </div> </div> </form> <!--end::Form--> </div>
// کلاس definition var KTFormRepeater = function() { // خصوصی 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"> تکرار فرم نمونه </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">نام خانوادگی:</label> <div class="col-lg-6"> <input type="email" class="form-control" placeholder="نام خانوادگی خود را وارد کنید"/> <span class="form-text text-muted">لطفا نام خانوادگی خود را وار کنید</span> </div> </div> <div class="form-group row"> <label class="col-lg-3 col-form-label text-right">آدرس الکترونیک:</label> <div class="col-lg-6"> <input type="email" class="form-control" placeholder="ایمیل را وارد کنید"/> <span class="form-text text-muted">لطفا یک ایمیل معتبر وارد کنید</span> </div> </div> <div class="form-group row align-items-center"> <label class="col-lg-3 col-form-label text-right">ارتباطات:</label> <div class="col-lg-12 col-xl-8"> <div class="checkbox-inline"> <label class="checkbox"> <input type="checkbox"/> پست الکترونیک <span></span> </label> <label class="checkbox"> <input type="checkbox"/> س م <span></span> </label> <label class="checkbox"> <input type="checkbox"/> تلفن <span></span> </label> </div> </div> </div> <div class="form-group row"> <label class="col-form-label text-right col-lg-3 col-sm-12">شماره کارت</label> <div class="col-lg-6 "> <div class="input-group"> <input type="text" class="form-control" name="creditcard" placeholder="شماره کارت را وارد کنید"/> <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">مخاطب:</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="شماره تلفن را وارد کنید"/> <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> افزودن </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">ارسال</button> <button type="reset" class="btn font-weight-bold btn-secondary">لغو</button> </div> </div> </div> </form> <!--end::Form--> </div>
// کلاس definition var KTFormRepeater = function() { // خصوصی 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"> تکرار فرم نمونه </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">نام خانوادگی:</label> <div class="col-lg-6"> <input type="email" class="form-control" placeholder="نام خانوادگی خود را وارد کنید"/> <span class="form-text text-muted">لطفا نام خانوادگی خود را وار کنید</span> </div> </div> <div class="form-group row"> <label class="col-lg-3 col-form-label text-right">آدرس الکترونیک:</label> <div class="col-lg-6"> <input type="email" class="form-control" placeholder="ایمیل را وارد کنید"/> <span class="form-text text-muted">لطفا یک ایمیل معتبر وارد کنید</span> </div> </div> <div class="form-group row align-items-center"> <label class="col-lg-3 col-form-label text-right">ارتباطات:</label> <div class="col-lg-12 col-xl-8"> <div class="checkbox-inline"> <label class="checkbox"> <input type="checkbox"/> پست الکترونیک <span></span> </label> <label class="checkbox"> <input type="checkbox"/> س م <span></span> </label> <label class="checkbox"> <input type="checkbox"/> تلفن <span></span> </label> </div> </div> </div> <div class="form-group row"> <label class="col-form-label text-right col-lg-3 col-sm-12">شماره کارت</label> <div class="col-lg-6 "> <div class="input-group"> <input type="text" class="form-control" name="creditcard" placeholder="شماره کارت را وارد کنید"/> <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">مخاطب:</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="تلفن"/> </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="پست الکترونیک"/> </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> افزودن </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">ارسال</button> <button type="reset" class="btn font-weight-bold btn-secondary btn-shadow">لغو</button> </div> </div> </div> </form> <!--end::Form--> </div>
// کلاس definition var KTFormRepeater = function() { // خصوصی 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(); });