Jquery递增字段名称

继我之前的问题之后

我现在有一个表单,当单击添加时,向表单添加一个新的输入字段,增加字段名称,每次输入一个文本。 例如: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和电话号码2等

  • 输入文本和字段名称有三个字段,分别是电话号码1和电话号码2以及电话号码3等

如果我然后使用删除按钮删除电话号码2,我最终得到1和3,单击添加从4开始。

有没有办法,如果我删除2而不是1和3,我会得到1,2,下一个添加将是3?

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

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

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

Phone number :

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

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