在jQuery中生成带唯一name的动态输入框的重复问题排查

问题描述 #

实现点击按钮动态添加输入框功能时，要求每个输入框的name属性唯一。当前代码在删除输入框后再添加新框时，会出现name重复的情况：例如添加3个输入框后删除第二个，再添加新框会出现两个name="phone_number[3]"的输入框。

原始代码 #

HTML

<div class="control-group field_wrapper">
  <label class="control-label"><strong> Phone Number 1</strong></label>
  <input type="text" class="input-medium" name="phone_number[]">
  <button class="btn btn-success add-number" type="button" title="Add">Add</button>
</div>
<div class="additionalNumber"></div>

jQuery

$(document).ready(function(){
  var maxField = 10; 
  var addButton = $('.add-number'); 
  var wrapper = $('.additionalNumber'); 
  function fieldHTML(inputNumber) {
      return `<div class="control-group field_wrapper">\
                <label class="control-label"><strong> Phone Number ${inputNumber}</strong></label>\
                <input type="text" class="input-medium"  name="phone_number[${inputNumber}]">\
                <button class="btn btn-danger remove" type="button">Remove</button>\
              </div>`;
  }
  var x = 1;
  $(addButton).on('click', function(e) {
    if (x < maxField) {
      x++;
      $(wrapper).append(fieldHTML(x));
    }
    if (x >= maxField) {
      alert('Limited to 10.');
    }
  });
  $(wrapper).on('click', '.remove', function(e) {
    e.preventDefault();
    $(this).parents('.control-group').remove();
    x--; 
  });
});

问题根源 #

依赖全局变量x生成序号，删除输入框时x递减，但已存在的输入框序号并未同步更新，导致新添加时使用了之前已被占用的序号，引发name重复。

修复方案 #

不再依赖全局计数变量，每次添加新输入框时，动态获取当前所有输入框中的最大序号，再加1作为新序号，确保name属性唯一。

修改后的代码

HTML（统一第一个输入框的name格式）

<div class="control-group field_wrapper">
  <label class="control-label"><strong> Phone Number 1</strong></label>
  <input type="text" class="input-medium" name="phone_number[1]">
  <button class="btn btn-success add-number" type="button" title="Add">Add</button>
</div>
<div class="additionalNumber"></div>

jQuery

$(document).ready(function(){
  var maxField = 10; 
  var addButton = $('.add-number'); 
  var wrapper = $('.additionalNumber'); 
  
  // 生成输入框HTML的函数
  function fieldHTML(inputNumber) {
      return `<div class="control-group field_wrapper">\
                <label class="control-label"><strong> Phone Number ${inputNumber}</strong></label>\
                <input type="text" class="input-medium" name="phone_number[${inputNumber}]">\
                <button class="btn btn-danger remove" type="button">Remove</button>\
              </div>`;
  }
  
  // 获取当前所有输入框的最大序号
  function getMaxNumber() {
      var maxNum = 1;
      // 遍历所有name为phone_number[xxx]的输入框
      $('input[name^="phone_number["]').each(function() {
          // 提取name中的数字部分
          var num = parseInt($(this).attr('name').match(/\[(\d+)\]/)[1]);
          if (num > maxNum) {
              maxNum = num;
          }
      });
      return maxNum;
  }
  
  // 添加按钮点击事件
  $(addButton).on('click', function(e) {
    var currentMax = getMaxNumber();
    if (currentMax < maxField) {
      var newNum = currentMax + 1;
      $(wrapper).append(fieldHTML(newNum));
    } else {
      alert('Limited to 10.');
    }
  });
  
  // 删除按钮点击事件
  $(wrapper).on('click', '.remove', function(e) {
    e.preventDefault();
    $(this).parents('.control-group').remove();
  });
});

说明 #

1. 统一所有输入框的name格式为phone_number[数字]，方便提取序号；
2. 通过getMaxNumber函数动态获取当前最大序号，确保新输入框的序号始终是当前最大的+1，避免重复；
3. 删除输入框时无需调整计数变量，彻底解决了删除后添加导致的name重复问题。

内容的提问来源于stack exchange，提问作者ugsgknt