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

Question

我正在看这个小提琴 http://jsfiddle.net/yezw6c51/1/ ，它做了我需要做的一个例外。

加载时，有一个名为＆＃39; phone_number＆＃39;的输入字段。

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

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

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

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

ie：电话号码2 = phone_number2等

我该怎么做？

由于

Answer 1

用span

包装文字

<span>Phone number :</span>

然后你可以只改变范围内的文字

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

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

Answer 2

而不是给每个输入不同的名称，你可以使用name =＆＃34; phoneNumber []＆＃34;并循环后端的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);
    });
});

}）;

Answer 3

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

并在脚本中进行这些更改

$(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/