如何使用jQuery和增量ID和名称添加（克隆）表单字段

因为我花了几天的时间才找到一个好方法来实现我想要的，所以我想我应该发布这个问答，以节省别人一些宝贵的时间和不健康的挫折感：3。我尽可能地简化了代码（如删除表单操作等）

基本上，我想做的是：

<form>
    <p>
        <input type="button" value="Add phone number"> 
    </p>
</form>

变成这样（通过单击按钮）：

电话号码：

如果我再点击一次，就会变成这样：

<form>
    <div>
        <p>
            Phone number : <input type="text" name="phone_number1"> 
            <input type="button" id="remove_phone_number1" value="Remove">
        </p>
    </div>
    <div>
        <p>
            Phone number : <input type="text" name="phone_number2"> 
            <input type="button" id="remove_phone_number2" value="Remove">
        </p>
    </div>
    <p>
        <input type="button" value="Add phone number">
    </p>
</form>

电话号码：


电话号码：

（当然，所有这些都有一个工作移除按钮）

我认为做这样的事情非常简单直接，但我真的很难找到解决办法。

我就是这么做的=D

因为我有许多页面使用相同的动态添加表单字段，所以我希望能够在每个需要表单的页面中包含（php）一个不可见的表单模型，并根据需要克隆一个（或多个）可见的表单版本。我不会用php包含来打扰你，因为这不是本文的主题。请记住，这是重用代码的一种可能方式。让我们潜水吧

HTML

<div id="phone_number_form" class="hidden">
    <p>
        Phone number : <input type="text" name="phone_number"> 
        <input type="button" id="remove_phone_number" value="Remove">
    </p>
</div>
<form>
    <p>
        <input type="button" value="Add phone number" id="add_phone_number">
    </p>
</form>

jQuery

<script>
    $(document).ready(function(){
        //We will be using an unique index number for each new instance of the cloned form
        var phone_number_form_index=0;
        //When the button is clicked (or Enter is pressed while it's selected)
        $("#add_phone_number").click(function(){
            //Increment the unique index cause we are creating a new instance of the form
            phone_number_form_index++;
            //Clone the form and place it just before the button's <p>. Also give its id a unique index
            $(this).parent().before($("#phone_number_form").clone().attr("id","phone_number_form" + phone_number_form_index));
            //Make the clone visible by changing CSS
            $("#phone_number_form" + phone_number_form_index).css("display","inline");
            //For each input fields contained in the cloned form...
            $("#phone_number_form" + phone_number_form_index + " :input").each(function(){
                //Modify the name attribute by adding the index number at the end of it
                $(this).attr("name",$(this).attr("name") + phone_number_form_index);
                //Modify the id attribute by adding the index number at the end of it
                $(this).attr("id",$(this).attr("id") + phone_number_form_index);
            });
            //When the Remove button is clicked (or Enter is pressed while it's selected)
            $("#remove_phone_number" + phone_number_form_index).click(function(){
                //Remove the whole cloned div
                $(this).closest("div").remove();
            });
        }); 
    });
</script>

$（文档）.ready（函数（）{
//我们将为克隆表单的每个新实例使用唯一的索引号
var电话号码形式索引=0；
//单击按钮时（或选择按钮时按Enter键）
$（“#添加电话号码”）。单击（函数（）{
//增加唯一索引，因为我们正在创建表单的新实例
电话号码表格索引++；
//克隆表单并将其放置在按钮的前面。同时为其id指定唯一索引
$（this）.parent（）.before（$（“#电话号码表格”）.clone（）.attr（“id”，“电话号码表格”+电话号码表格索引））；
//通过更改CSS使克隆可见
$（“#电话号码表格”+电话号码表格索引）.css（“显示”、“内联”）；
//对于克隆表单中包含的每个输入字段。。。
$（“#电话号码表格”+电话号码表格索引+”：输入”）。每个（函数（）{
//通过在名称属性的末尾添加索引号来修改名称属性
$（this.attr（“name”），$（this.attr（“name”）+电话号码+表格索引）；
//通过在id属性的末尾添加索引号来修改id属性
$（this.attr（“id”），$（this.attr（“id”）+电话号码+表格索引）；
});
//单击“删除”按钮时（或选择时按Enter键）
$（“#删除电话号码”+电话号码表格索引）。单击（函数（）{
//删除整个克隆的div
$（this）.closest（“div”）.remove（）；
});
}); 
});

下面是一个工作示例：

我希望我的帖子能对你们中的一些人有所帮助^_^

如果您发现任何错误或可能的优化，请评论，我会尽快修复它们

---

Fearelblood

对于类似的问题，我找不到一个合理、灵活的解决方案，因此我提出了以下建议：

我创建了一个“原始”元素并将其隐藏在页面上。我在原始元素的任何子元素中需要递增的任何属性的值后面附加了“---”

每当用户单击一个按钮来创建原始的克隆时，我就创建了一个克隆，然后用该克隆的HTML中的当前索引全局替换“--”。大概是这样的：

var $clone = $original.clone();
var cloneHTML = $clone.html().replace(/---/g, incrementedFieldNum);
$clone.html(cloneHTML);

// Insert and show the clone after the original
$original.after($clone);

我使用了一个数据属性来存储incrementedFieldNum的更新值（上面的代码中没有显示）

---

希望这能有所帮助。它的代码少了很多，我认为这是一个更通用的解决方案。我有很多嵌套元素需要增加ID和名称，因此像@FearmeBlood这样的解决方案是不切实际的。

Hi，请告诉我如何在添加新字段时应用“必需”字段之类的验证，首先检查现有字段是否为空，如果为空，则显示错误消息。如果我需要添加比第一个更多的字段，我需要填写切除字段。如何在上述代码中应用此验证。提前感谢。

<script>
    $(document).ready(function(){
        //We will be using an unique index number for each new instance of the cloned form
        var phone_number_form_index=0;
        //When the button is clicked (or Enter is pressed while it's selected)
        $("#add_phone_number").click(function(){
            //Increment the unique index cause we are creating a new instance of the form
            phone_number_form_index++;
            //Clone the form and place it just before the button's <p>. Also give its id a unique index
            $(this).parent().before($("#phone_number_form").clone().attr("id","phone_number_form" + phone_number_form_index));
            //Make the clone visible by changing CSS
            $("#phone_number_form" + phone_number_form_index).css("display","inline");
            //For each input fields contained in the cloned form...
            $("#phone_number_form" + phone_number_form_index + " :input").each(function(){
                //Modify the name attribute by adding the index number at the end of it
                $(this).attr("name",$(this).attr("name") + phone_number_form_index);
                //Modify the id attribute by adding the index number at the end of it
                $(this).attr("id",$(this).attr("id") + phone_number_form_index);
            });
            //When the Remove button is clicked (or Enter is pressed while it's selected)
            $("#remove_phone_number" + phone_number_form_index).click(function(){
                //Remove the whole cloned div
                $(this).closest("div").remove();
            });
        }); 
    });
</script>

var $clone = $original.clone();
var cloneHTML = $clone.html().replace(/---/g, incrementedFieldNum);
$clone.html(cloneHTML);

// Insert and show the clone after the original
$original.after($clone);