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：Bootstrap Dynamic Form Tabs

将表单代码添加到JS文件中的主要问题是代码的绝对长度及其包含的内容。无论如何，在不对JS文件中的HTML元素进行硬编码的情况下，我能否实现我要实现的目标？

编辑我刚刚注意到，创建带有“添加费用”链接的标签后，它实际上并没有保存所述标签。如果用户断开连接/手机死机，我需要坚持使用该标签，返回时该标签仍会存在。

谢谢！

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

表单输入重复到新的引导选项卡

1 个答案: