Jquery添加克隆表单字段 - 增加名称答案

【问题标题】：Jquery Adding cloning form fields - increment nameJquery添加克隆表单字段 - 增加名称
【发布时间】：2014-12-03 02:44:39
【问题描述】：

我正在看这个小提琴 http://jsfiddle.net/yezw6c51/1/，它可以完成我需要做的事情，但有一个例外。

当你加载它时，它有一个名为“phone_number”的输入字段

当您点击Add phone number 时，您可以像这样添加多个行/输入字段：

添加的每个新输入字段的字段名称都会递增。例如：phone_number1、phone_number2 等。这很好用。

但我希望每个输入字段之前的文本也添加递增值，所以你最终得到：

因此文本描述的值与 phone_number 字段的值相同。

即：电话号码 2 = phone_number2 等

我该怎么做？

谢谢

【问题讨论】：

你尝试按照你想要的方式修改它？
鉴于 jQuery 已经（明确地）使用计数器来增加 <input> 元素的详细信息，您需要做的就是将该计数器插入另一个位置（以及）。你被困在哪里了？
虽然 jQuery 可以正常工作，但您也可以 do this with angular!只是思考的食物。

标签： php jquery forms field clone

【解决方案1】：

用 span 换行

<span>Phone number :</span>

那么你只能更改 span 内的文本

$(this).parent().find('span').text('Phone number ' + phone_number_form_index);

小提琴：http://jsfiddle.net/yezw6c51/16/

【讨论】：

【解决方案2】：

您可以使用 name="phoneNumber[]" 并在后端的 post 键中循环，而不是为每个输入提供不同的名称。演示：http://jsfiddle.net/artuc/yezw6c51/23/

HTML：

<form name="test">
    <div class="formRow">
        <label>Phone Number <span>1</span>:</label>
        <input type="text" name="phoneNumber[]" />
    </div>

    <a href="javascript:void(0);" class="btnAdd">Add [+]</a>
</form>

JS：

$(document).ready(function(){
$('.btnAdd').click(function(){
    base = $('.formRow:first');
    newRow = base.clone().insertAfter($('.formRow:last'));
    newRow.find('input').val('');
    newRow.find('label>span').text(newRow.index('.formRow')+1);
    newRow.append('<input type="button" class="btnRemove" value="Remove"/>');
});

$(document).on('click', '.btnRemove', function(){
    $(this).parent().remove();
    //update index
    $('.formRow').each(function(){
        target = $(this).find('label>span');
        target.text($(this).index('.formRow')+1);
    });
});

});

【讨论】：

【解决方案3】：

您可以在 HTML 中的“电话号码”之后使用 Span。

并在您的脚本中进行这些更改

$(document).ready(function(){
    var phone_number_form_index=1;
    $("#add_phone_number").click(function(){
        phone_number_form_index++;
        $(this).parent().before($("#phone_number_form").clone().attr("id","phone_number_form" + phone_number_form_index));
        $("#phone_number_form" + phone_number_form_index).css("display","inline");
        $("#phone_number_form" + phone_number_form_index).find("span").html(phone_number_form_index);
        $("#phone_number_form" + phone_number_form_index + " :input").each(function(){
            $(this).attr("name",$(this).attr("name") + phone_number_form_index);
            $(this).attr("id",$(this).attr("id") + phone_number_form_index);
            });
        $("#remove_phone_number" + phone_number_form_index).click(function(){
            $(this).closest("div").remove();
        });
    }); 
});

在这里查看 http://jsfiddle.net/yezw6c51/24/

【讨论】：