如何使用jQuery添加(克隆)表单字段并增加id和名称

Question

因为我花了几天时间才找到一个实现我想要的好方法,所以我想我会发布这个Q&A以节省其他宝贵的时间和不健康的挫折感: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>

(当然,只有工作的删除按钮)

我认为做这样的事情非常简单易行,但我很难找到解决方案.

Answer 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/

我希望我的帖子会帮助你们中的一些人!^ _ ^

如果您发现任何错误或可能的优化,请发表评论,我会尽快解决

Fierceblood