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

Posted 2023-03-25

【中文标题】如何使用 jQuery 添加（克隆）表单字段并增加 ID 和名称

【英文标题】：How to add (clone) form fields using jQuery and increment ids and names

【发布时间】：2013-11-03 21:06:14

【问题描述】：

由于我花了几天时间才找到实现我想要的好方法，我想我会发布这个问答来节省其他人一些宝贵的时间和不健康的挫败感：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>
    <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>

（当然，所有这些都带有一个有效的删除按钮）

我认为做这样的事情非常简单明了，但我很难找到解决方案。

【参考方案1】：

这就是我所做的！ =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>

CSS

.hidden 
    display: none;

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>

这是一个工作示例：http://jsfiddle.net/wc28f/3/

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

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

凶猛的血

【讨论】：

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

【参考方案2】：

对于类似的问题，我找不到合理、灵活的解决方案，所以我想出了这个：

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

每当用户单击一个按钮来创建原始副本的副本时，我都会创建一个副本，然后将“---”全局替换为该副本 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 和名称，所以像 @Fierceblood 提供的解决方案是不切实际的。