Question

继续之前的 question

我现在有一个表单，当点击添加时，会向表单添加一个新的输入字段，增加字段名称，每次输入一个文本。例如：phone_number1，phone_number2等

我使用的jquery是：

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

但是，如果删除某个字段，编号就会搞乱。

例如：

使用一个字段，输入的文本和字段名称为电话号码1 / PHONE_NUMBER1
使用两个字段，输入文本和字段名称为电话号码1＆amp; 电话号码2等
使用三个字段，输入文本和字段名称为电话号码1＆amp; 电话号码2＆amp;电话号码3等

如果我然后使用移除按钮删除电话号码2我最终得到1＆amp; 3，点击添加从4开始。

如果我删除2而不是1＆amp; 3，我会得到1,2，下一个添加将是3？

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

Answer 1

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

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

更新了Fiddle

Answer 2

您可以将字段名称用作phone_number []，这将是标准。
如果您无法更改程序，则在提交表单时，通过逐个获取所有字段并将当前文本字段值分配给新字段来重命名字段，但这不是标准方法。

希望您能得到答案，如果您有任何其他问题，请在http://www.sourabhmodi.in/的新博客上与我联系。我很乐意帮助你..

Jquery递增字段名称

2 个答案: