引导表单动态添加带有字段的删除表单

Bootstrap form dynamically add remove form with fields

本文关键字：表单 字段 删除 添加 动态      更新时间：2023-09-26

我有一个 Bootstrap 水平表单（包含许多字段），并希望能够向父表单添加/删除一个或多个"子表单（具有许多字段）。

我也不确定该走哪条路，即使用 Bootstrap 组件的代码，或者纯粹使用 jQuery 和 CSS（在 Bootstrap 中），或者仅使用 JavaScript（在 Bootstrap 中）。

这可能是一个简单的问题，我一直在寻找面包和黄油的解决方案，但没有运气。也许这很难做到。

找到了这个，但没有帮助 SO 上的类似问题

而这个，但它是在JavaScript中完成的 关于SO的另一个问题

这是我想做的一个例子，我有一个包含个人详细信息字段的父表单，并且希望当用户单击按钮（+）时动态添加地址表单，如果单击按钮（-），则删除地址表单。

人

名：

姓：

电子邮件：

按钮 （+/-）

地址 1

街：

郊区：

邮政编码：

地址 2

街：

郊区：

邮政编码：

我已经做了一些像你和剑道谈论的事情。 基本上，您需要一个模板和添加/删除项目功能。 使用任何模板功能，您可以定义模板，并基于 JSON 对象动态生成模板，并将其添加到 DOM 树中，或使用 jQuery 从 DOM 树中删除现有项。

模板是一个很好的选择，可能是你应该走的路。 但是，如果你想避免添加模板引擎，你可以使用 jQuery，甚至只是普通 JS。

下面是简单的 JQuery 示例：

  $(function () {
    function createGroup(name) {
        var label = document.createElement("label");
        $label = $(label);
        $label.attr("for", name)
            .text(name);
        var input = document.createElement("input");
        $input = $(input);
        $input.addClass("form-control")
            .attr("type", "text")
            .attr("name", name);
        var group = document.createElement("div");
        $group = $(group);
        $group.addClass("form-group")
            .append(label, input);
        return group;
    }
    $("#plusButton").click(
        function () {
            var newHorizontalForm = document.createElement("div");
            $(newHorizontalForm).append(createGroup("New Input"),
                    createGroup("New Input"),
                    createGroup("New Input"))
                .addClass("form-horizontal");
                $("#form").append(newHorizontalForm);
    });

     $("#minusButton").click(
            this.parent.remove();
        });
});
相关文章：