Я мм, пытаясь создать повторитель Forom с помощью 2 кнопки добавления.Добавить A или Добавить B. Когда я нажимаю кнопку «Добавить», повторяется форма A, а при нажатии кнопки «Добавить B» повторяется форма B
Вот изображение
А вот HTML, который у меня есть
<div id="m_repeater">
<div id="m_repeater_1">
<div class="form-group m-form__group row" id="m_repeater_1">
<label class="col-lg-2 col-form-label">Contacts:</label>
<div data-repeater-list="group-a" class="col-lg-10">
<div data-repeater-item class="form-group m-form__group row align-items-center">
<div class="col-md-3">
<div class="m-form__group m-form__group--inline">
<div class="m-form__label">
<label>AName:</label>
</div>
<div class="m-form__control">
<input type="email" class="form-control m-input">
</div>
</div>
<div class="d-md-none m--margin-bottom-10"></div>
</div>
<div class="col-md-3">
<div class="m-form__group m-form__group--inline">
<div class="m-form__label">
<label class="m-label m-label--single">ANumber:</label>
</div>
<div class="m-form__control">
<input type="email" class="form-control m-input">
</div>
</div>
<div class="d-md-none m--margin-bottom-10"></div>
</div>
<div class="col-md-2">
<div class="m-form__group m-form__group--inline">
<div class="m-form__label">
<label class="m-label m-label--single">Order:</label>
</div>
<div class="m-form__control">
<input type="email" class="form-control m-input">
</div>
</div>
<div class="d-md-none m--margin-bottom-10"></div>
</div>
<div class="col-md-4">
<div data-repeater-delete="" class="btn-sm btn btn-danger m-btn m-btn--icon m-btn--pill">
<span>
<i class="la la-trash-o"></i>
<span>Delete</span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="m_repeater_11">
<div class="form-group m-form__group row" id="m_repeater_11">
<label class="col-lg-2 col-form-label"></label>
<div data-repeater-list="group-b" class="col-lg-10">
<div data-repeater-item class="form-group m-form__group row align-items-center">
<div class="col-md-3">
<div class="m-form__group m-form__group--inline">
<div class="m-form__label">
<label>BName:</label>
</div>
<div class="m-form__control">
<input type="email" class="form-control m-input">
</div>
</div>
<div class="d-md-none m--margin-bottom-10"></div>
</div>
<div class="col-md-3">
<div class="m-radio-inline">
<label class="m-checkbox m-checkbox--state-success">
<input type="checkbox">Necessary
<span></span>
</label>
</div>
</div>
<div class="col-md-2">
<div class="m-form__group m-form__group--inline">
<div class="m-form__label">
<label class="m-label m-label--single">Order:</label>
</div>
<div class="m-form__control">
<input type="email" class="form-control m-input">
</div>
</div>
<div class="d-md-none m--margin-bottom-10"></div>
</div>
<div class="col-md-4">
<div data-repeater-delete="TFBO" class="btn-sm btn btn-danger m-btn m-btn--icon m-btn--pill">
<span>
<i class="la la-trash-o"></i>
<span>Delete</span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="m-form__group form-group row">
<label class="col-lg-2 col-form-label"></label>
<div class="col-lg-4">
<div data-repeater-create="tour" class="btn btn btn-sm btn-brand m-btn m-btn--icon m-btn--pill m-btn--wide">
<span>
<i class="la la-plus"></i>
<span>Add A</span>
</span>
</div>
</div>
<div class="col-lg-4">
<div data-repeater-create="TFBO" class="btn btn btn-sm btn-brand m-btn m-btn--icon m-btn--pill m-btn--wide">
<span>
<i class="la la-plus"></i>
<span>Add B</span>
</span>
</div>
</div>
</div>
</div>
А вот js
var FormRepeater = {
init: function() {
$("#m_repeater").repeater({
initEmpty: !1,
defaultValues: {
"text-input": "foo"
},
show: function() {
$(this).slideDown()
},
hide: function(e) {
$(this).slideUp(e)
}
}),
$("#m_repeater_1").repeater({
initEmpty: !1,
defaultValues: {
"text-input": "foo"
},
show: function() {
$(this).slideDown()
},
hide: function(e) {
$(this).slideUp(e)
}
}),
$("#m_repeater_11").repeater({
initEmpty: !1,
defaultValues: {
"text-input": "foo"
},
show: function() {
$(this).slideDown()
},
hide: function(e) {
$(this).slideUp(e)
}
})
}
};
jQuery(document).ready(function() {
FormRepeater.init()
});
Я знаю, что это можно сделать с двумя разными повторителями формы.Но дело лучше контролирует вещи, которые мы сохраняем.
Я попробовал несколько версий, но моя информация js не слишком хороша, но я неправильно поступаю с html-частью.Я пробовал разные варианты, но я не мог.
Я также проверил в сети, есть ли подобный вопросЕдинственное, что я обнаружил, - это использование двух разных репатеров форм на одной странице.Так что это не было моим решением.
Мне нужно сообщить, что этот дизайн я получил из шаблона администратора metronic.
Вот ссылка Повторитель формы Metrnic