代码之家 › 专栏 › 技术社区 › TheOrdinaryGeek

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

dynamic forms html jquery

TheOrdinaryGeek · 技术社区 · 6 年前

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]">

现在他们都一样 名称 身份证件 ;

<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 . 如有任何帮助,我们将不胜感激。

<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 回复 | 直到 6 年前

Stuart 6 年前

使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>