Повторяющиеся вводы формы в новую вкладку начальной загрузки

Question

В настоящее время я имею дело со страницей отправки формы, где пользователь может отчитываться за каждую поездку, которую он совершает в рабочее время клиента.У меня есть все настройки формы, извлечение информации из базы данных для выбранных полей ввода, которые у меня есть, и в настоящее время я держу ее в карточке Bootstrap (для эстетики, idk).

Моя проблема заключается в следующем:Я хочу иметь возможность дублировать эту форму, но со значениями по умолчанию, на вкладку начальной загрузки после нажатия «Новый расход».У меня есть новая ссылка вкладки расходов, работающая для динамического добавления и удаления вкладок, но я хочу, чтобы форма и ее значения по умолчанию были видны после нажатия «Новый расход».

$(".nav-tabs").on("click", "a", function (e) {
    e.preventDefault();
    if (!$(this).hasClass('addNew')) {
        $(this).tab('show');
    }
})
.on("click", "span", function () {
    var anchor = $(this).siblings('a');
    $(anchor.attr('href')).remove();
    $(this).parent().remove();
    $(".nav-tabs li").children('a').first().click();
});

$('.addNew').click(function (e) {
    e.preventDefault();
    var id = $(".nav-tabs").children().length; //think about it ;)
    var tabId = 'expense_' + id;
    $(this).closest('li').before('<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#expense_' + id + '">New Expense</a><span>x</span></li>');
    $('.tab-content').append('<div class="tab-pane" id="' + tabId + '">Expense Form: New Expense ' + id + '</div>');
   $('.nav-tabs li:nth-child(' + id + ') a').click();
});

Вот JSFiddle того, что я в настоящее времяhave: Bootstrap Динамические вкладки формы

Моя главная проблема с добавлением кода моей формы в мой файл JS - это длина кода и то, что включено в него.Могу ли я в любом случае добиться того, чего я пытаюсь достичь, без жесткого кодирования элементов HTML в моем файле JS?

РЕДАКТИРОВАТЬ Я только что заметил, что при создании вкладки "Добавить"Ссылка "Расход", фактически она не сохраняет указанную вкладку.Мне нужно, чтобы он прикреплялся в случае, если пользователь потерял соединение / его телефон умирает, вкладка все равно будет там после возврата.

Заранее спасибо!

Answer 1

здесь мы можем сначала скопировать форму по умолчанию, созданную ранее.Затем, когда каждый новый создается, мы можем передать его.Я думаю, это то, что вы хотите.

var defaultValues = $('#expense_1>.card-body').html()

$('.addNew').click(function (e) {
    e.preventDefault();
    var id = $(".nav-tabs").children().length; //think about it ;)
    var tabId = 'expense_' + id;
    $(this).closest('li').before('<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#expense_' + id + '">New Expense</a><span>x</span></li>');
    $('.tab-content').append('<div class="tab-pane" id="' + tabId + '"><div class="card-header">Expense '+ id +'</div><div class="card-body">'+ defaultValues +'</div></div>');
   $('.nav-tabs li:nth-child(' + id + ') a').click();
});