生成具有唯一名称和 ID 的动态输入

Posted 2023-05-09

【中文标题】生成具有唯一名称和 ID 的动态输入

【英文标题】：Generate Dynamic Inputs with Unique Names & IDs

【发布时间】：2019-01-24 14:49:32

【问题描述】：

我正在构建一个 Web 表单，在表单中，可以通过单击按钮动态添加其他输入框。我已经完成了这部分工作，但是我需要每个输入都有一个唯一的name 和id。

例如；

<input type="text" name="inventory_number[0]" id="inventory_number[0]">
<input type="text" name="inventory_number[1]" id="inventory_number[1]">
<input type="text" name="inventory_number[2]" id="inventory_number[2]">

目前他们都有相同的name和id；

<input type="text" name="inventory_number[]" id="inventory_number[]">
<input type="text" name="inventory_number[]" id="inventory_number[]">
<input type="text" name="inventory_number[]" id="inventory_number[]">

下面是我的代码以及fiddle。任何帮助表示赞赏。

HTML

<div class="control-group field_wrapper">
  <label class="control-label"><strong> Inventory Number 1</strong></label>
  <div class="controls">
    <div class="input-prepend">
      <input type="text" class="input-medium" name="inventory_number[]" id="inventory_number[]">
      <button class="btn btn-success add-number" type="button" title="Add MAC Address"><i class="icon-plus"></i> </button>
    </div>
  </div>
</div>
<div class="additionalNumber"></div>

JQuery

var maxField = 10; 
var addButton = $('.add-number'); 
var wrapper = $('.additionalNumber'); 
var fieldhtml = '<div class="control-group field_wrapper"><label class="control-label"><strong> Inventory Number x</strong></label><div class="controls"><div class="input-prepend"><input type="text" class="input-medium"  name="inventory_number[]" id="inventory_number[]"><button class="btn btn-danger remove" type="button"><i class="icon-remove"></i> </button></div></div></div>';
var x = 1;
$(addButton).on('click', function(e) 
  if (x < maxField) 
    x++;
    $(wrapper).append(fieldHTML);
  
  if (x >= maxField) 
    alert('Limited to 10.');
  
);
$(wrapper).on('click', '.remove', function(e) 
  e.preventDefault();
  $(this).parents('.control-group').remove();
  x--; 
);

如果有更简单/更有效的方法来实现上述目标，我愿意接受建议。

【问题讨论】：

为什么你需要一个不同的名字？我认为在您的情况下，最好的解决方案是像您一样使用数组名称约定。

【参考方案1】：

将fieldHtml设为函数并传入x：

//JQuery

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> Inventory Number $inputNumber</strong></label><div class="controls"><div class="input-prepend"><input type="text" class="input-medium"  name="inventory_number[$inputNumber]" id="inventory_number[$inputNumber]"><button class="btn btn-danger remove" type="button"><i class="icon-remove"></i> Remove</button></div></div></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--; 
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="control-group field_wrapper">
  <label class="control-label"><strong> Inventory Number 1</strong></label>
  <div class="controls">
    <div class="input-prepend">
      <input type="text" class="input-medium" name="inventory_number[]" id="inventory_number[]">
      <button class="btn btn-success add-number" type="button" title="Add MAC Address"><i class="icon-plus"></i> Add</button>
    </div>
  </div>
</div>
<div class="additionalNumber"></div>

【讨论】：

发布你的小提琴链接

jquery 版本在这里没有区别。我在那个小提琴链接中看不到任何尝试？肯定复制我上面所做的:)

抱歉，我的错！它完美地工作。我在 return 中使用了不正确的引号 - 我使用的是 ' ' 而我应该使用 ` ` - 我没有意识到这有什么不同？！

使用反引号```被称为字符串模板，里面的变量用美元/大括号访问，像这样：`some text and $vars1`