Question

我有一个表格要求提供一些一般信息（我称之为Gen-info），然后是表格中的一个字段集，我要求提供其他信息。

我要做的是创建一个新的字段集，询问相同的其他信息并重命名，但现在我只知道如何创建完整整个表单的副本（它也要求一般信息）。

现在我正在创建这样的按钮：

<button type="button" id="btnAddForm" onclick="CloneForm('Gen-info');">Add other info</button>

我正在使用这个javascript函数：

function CloneForm(formName) {
    var formCount = document.forms.length;
    var oForm = document.forms[formName];
    var clone = oForm.cloneNode(true);
    clone.name += "New form " + formCount;
    document.body.appendChild(clone);
}

Click here to see the whole code

正如您所看到的，我将复制整个表单，但我想要的是复制其中显示“其他信息1”的部分，并在我单击并将其添加到“其他信息2”时将其重命名为每次创建一个新名称时的名称。不同的是，现在我每次都复制整个表单，我只想复制字段集。

非常感谢！

Answer 1

您可以选择最后一个字段集并更改其文字：

https://jsfiddle.net/tx839gf3/1/

function CloneForm(formName) {
    // your stuff
    var hm = document.getElementsByClassName("other-info").length;
    document.getElementsByClassName("other-info")[hm-1].innerHTML = "<b>Other information "+ hm +"</b>";
}

html中的更改

<fieldset><legend class="other-info"><b> Other information 1 </b></legend><label> 
                         ^^^^^^^^^^^

请注意图例中的类更改。

Answer 2

以下是使用jQuery进行这些操作的方法，我对每行进行了注释，以便您可以遵循逻辑。 html也略有改动（你没有关闭</fieldset>）

//on startup
$(function() {
    //add a click event-handler to the button
    $("#btnAddForm").click(function() {
        $clone = $("fieldset").last().clone() //clone the last fieldset
        $number = $clone.find("span") //get the element with the number
        $number.html(parseInt($number.html()) + 1) //add 1 to the number
        $("fieldset").last().after($clone) //insert the new clone
    })
})

以下是整个事情，请注意jQuery作为脚本包含在左侧的下拉列表中。 https://jsfiddle.net/tx839gf3/4/

编辑，下面是一个提供新名称的人，在开始时有一个新行，三行迭代输入元素，并命名它们：

$(function() {
    var n = 4 //start naming elements with this number
    $("#btnAddForm").click(function() {
        $clone = $("fieldset").last().clone() //clone the last fieldset
        $number = $clone.find("span") //get the element with the number
        $number.html(parseInt($number.html()) + 1) //calc and set new number
        //loop all the input fields in the copied group
        $clone.find("input").each(function() {
            $(this).attr("name", "other-info-" + n++) //set the new name-number (and iterate it)
        })
        $("fieldset").last().after($clone) //insert the new clone
    })
})

使用javascript

2 个答案: