Блог

В настоящее время я имею дело со страницей отправки формы, где пользователь может отправлять расходы за каждую поездку, которую они совершают в часы работы клиента. Я настроил всю форму, извлекая информацию из базы данных для выбранных полей ввода, которые у меня есть, и в настоящее время я храню ее на загрузочной карте (для эстетики, 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 того, что у меня есть в настоящее время: Вкладки динамической формы начальной загрузки

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

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

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

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

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