jQuery递增字段名称 [英] Jquery Incrementing field names

问题描述

接着我上一个 问题

Following on from my previous question

我现在有了一个表单，当单击添加时，会向表单添加一个新的输入字段，使字段名和输入文本每次递增一.例如:phone_number1，phone_number2等

I've now got a form that when clicking add, adds a new input field to the form incrementing the field name and input text by one each time. eg: phone_number1, phone_number2 etc

我正在使用的jquery是:

The jquery I'm using is :

$(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 + " :input").each(function(){
            $(this).parent().find('span').text('Phone number ' + phone_number_form_index);
            $(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();
        });
    }); 
});

此JFiddle显示表单的工作方式，当添加新行时，字段名称将与输入文本一样递增. http://jsfiddle.net/yezw6c51/25/

This JFiddle shows the form working and when adding a new row the field name is incremented as is the input text. http://jsfiddle.net/yezw6c51/25/

但是，如果我删除一个字段，编号可能会弄乱.

However if I remove a field, the numbering can get messed up.

例如:

• 在一个字段中，输入的文本和字段名称为电话号码1/ phone_number1

• With one field the input text and field names are Phone Number 1 / phone_number1

在两个字段中，输入的文本和字段名称分别为电话号码1"和电话号码". 电话号码2等

With two fields the input text and field names are Phone Number 1 & Phone Number 2 etc

在三个字段中，输入的文本和字段名称分别为电话号码1"和电话号码". 电话号码2&电话号码3等

With three fields the input text and field names are Phone Number 1 & Phone Number 2 & Phone Number 3 etc

如果我随后使用删除按钮删除了电话号码2，我最终得到1& 3，单击添加从4开始.

if I then remove phone number 2 using the remove button I end up with 1 & 3, clicking add starts at 4.

如果我删除2而不是1& ;，有什么办法吗? 3，我将得到1，2，下一个加法将是3?

Is there any way if I delete 2 instead of 1 & 3, I would get 1, 2 and the next add would be 3 ?

这将需要更新所有字段名称和正在更新的输入文本条目.

This would need to update all field names and input text entries that are being updated.

推荐答案

添加/删除后，您可以对所有输入和标签重新编号，如下所示:

After adding/removing you can renumber all the inputs and labels like follows:

$(document).ready(function(){
    $("#add_phone_number").click(function(){
        $(this).parent().before($("#phone_number_form").clone().show());
        reNumberInputs();
    });

    $("form").on("click", "[id^='remove_phone_number']", function(){
        $(this).closest("div").remove();
        reNumberInputs();
    });    
});

function reNumberInputs() {
    $("input[type='text']:visible").each(function(index, element) {
        var displayIndex = (index + 1).toString();
        element.id = "phone_number" + displayIndex;
        element.name = "phone_number" + displayIndex;
        if (index > 0) {
            $(this).prev("span").html("Phone number " + displayIndex);
            $(this).next("input").prop("id", "remove_phone_number" + displayIndex).prop("name", "remove_phone_number" + displayIndex);
        }
    });
}

.hidden {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="phone_number_form" class="hidden">
    <p>
        <span>Phone number</span> : <input type="text" name="phone_number" /> 
        <input type="button" id="remove_phone_number" value="Remove" />
    </p>
</div>
<form>
    <p>
        Phone number : <input type="text" name="phone_number1" /> 
    </p>
    <p>
        <input type="button" value="Add phone number" id="add_phone_number" />
    </p>
</form>

更新了小提琴

这篇关于jQuery递增字段名称的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！