使用javascript在单击时创建新表单字段

我有一个表单，它要求一些一般信息（我称之为Gen info），然后在表单中有一个字段集，我在其中要求其他信息

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

现在，我正在创建如下按钮：

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

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

---

多谢各位

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

函数克隆表单（formName）{
//你的东西
var hm=document.getElementsByClassName（“其他信息”）.length；
document.getElementsByClassName（“其他信息”）[hm-1].innerHTML=“其他信息”+hm+”；
}

html中的更改

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

其他信息1
^^^^^^^^^^^

---

注意图例中的类更改。

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

函数克隆表单（formName）{
//你的东西
var hm=document.getElementsByClassName（“其他信息”）.length；
document.getElementsByClassName（“其他信息”）[hm-1].innerHTML=“其他信息”+hm+”；
}

html中的更改

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

其他信息1
^^^^^^^^^^^

---

请注意图例中的类更改。

以下是如何使用jQuery执行此类操作，我对每一行都进行了注释，以便您可以遵循逻辑。html也有轻微的更改（您没有关闭

）

这里是全部内容，请注意jQuery作为脚本包含在左侧的下拉列表中。

编辑，这里有一行给出了新名称，开头有一行，三行迭代输入元素并命名它们：

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

---

下面是如何使用jQuery执行此类操作，我对每一行都进行了注释，以便您可以遵循逻辑。html也有轻微的更改（您没有关闭

）

这里是全部内容，请注意jQuery作为脚本包含在左侧的下拉列表中。

编辑，这里有一行给出了新名称，开头有一行，三行迭代输入元素并命名它们：

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

---

使用jQuery之类的工具可以大大简化任务，这是一个选项吗？我以前从未使用过它，但我愿意学习@zedd的所有内容。我对编程很在行，但如果您知道如何使用jQuery来实现这一点，也请告诉我。我会尝试使用它，如果我不能让它工作，我会再次问你或等待其他答案。非常感谢你！使用jQuery之类的工具可以大大简化任务，这是一个选项吗？我以前从未使用过它，但我愿意学习@zedd的所有内容。我对编程很在行，但如果您知道如何使用jQuery来实现这一点，也请告诉我。我会尝试使用它，如果我不能让它工作，我会再次问你或等待其他答案。非常感谢你！非常感谢。有了这个，我可以重命名新的字段集，但是我怎么能不创建第一个部分，在这里我需要一般信息呢？我希望能够使用其他信息创建字段集的副本。要仅克隆第二个块，您需要选择字段集，而不是表单。谢谢！有了这个，我可以重命名新的字段集，但是我怎么能不创建第一个部分，在这里我需要一般信息呢？我希望能够使用其他信息创建字段集的副本。要仅克隆第二个块，您需要选择字段集，而不是表单。太棒了！这正是我想要的。我会试着用它告诉你一些事情。非常感谢你！好的，请注意，您还应该更改新插入的输入元素的“name”属性。这些与克隆的部分相同，您需要知道什么是输入，什么是接收数据时的输入。我使用jQuery使其工作，虽然我理解这个问题，但我不知道到底要更改什么以及如何更改。你能帮帮我吗？非常感谢@zedd，我现在就接受你的回答@Polymath先生添加了一个扩展的示例，可能会帮助您超越可怕！这正是我想要的。我会试着用它告诉你一些事情。非常感谢你！好的，请注意，您还应该更改新插入的输入元素的“name”属性。这些与克隆的部分相同，您需要知道什么是输入，什么是接收数据时的输入。我使用jQuery使其工作，虽然我理解这个问题，但我不知道到底要更改什么以及如何更改。你能帮帮我吗？非常感谢@zedd，我现在就接受你的回答@Polymath先生添加了一个扩展示例，可能会对您有所帮助

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