添加新表单输入失败时增加名称属性

Question

在表单中有一个添加按钮，用于添加表单输入。在新的表单输入中，我尝试增加属性name 例如name="description-1"、name="description-2" 等。但是，所有新输入都具有相同的name="description-1"。我想念什么？

var dataList = $('.products');
var jsonOptions = [{
  "product": "11111",
  "description": "description 1"
}, {
  "product": "22222",
  "description": "description 2"
}, {
  "product": "33333",
  "description": "description 3"
}];

jsonOptions.forEach(function(item) {

  var option = '<option value="' + item.product + '">' + item.description + '</option>';

  dataList.append(option);
});

$(function() {
  $('body').on('input', '.product,.products', function() {

    var i = this.value;
    var description = "";
    var productsInBox = 0;

    jsonOptions.forEach(function(a) {
      if (a.product == i) {
        description = a.description;
      }
    });
    $(this).closest('.form-group').find('.description').val(description);


  });
});

counter = 0;

$('#form1').on('click', '.addButtonDED', function() {
    counter++;
    var $template = $('.form-group:last').clone(true, true).find('input').val('').end()
      .find('.addButtonDED').removeClass('addButtonDED').addClass('removeButtonDED').end()
      .find('[name="description-0"]').attr('name', 'description-' + counter).end()
      .find('i').removeClass('fa-plus').addClass('fa-minus').end();
    $template.insertAfter('.form-group:last');
  })

  // Remove button click handler
  .on('click', '.removeButtonDED', function() {
    counter--;
    var $row = $(this).closest('.form-group');
    $row.remove();
  });

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" method="post" class="form-horizontal" role="form">
  <fieldset>


    <div class="form-group">
      <div class="col-xs-2">
        <input type="text" list="products" class="form-control product" name="product" />
        <datalist id="products" class="products"></datalist>
      </div>

      <div class="col-xs-4">
        <input id="" type="text" class="form-control description" name="description-0" />
      </div>



      <div class="col-xs-1">
        <button type="button" class="btn btn-default addButtonDED"><i class="fa fa-plus"></i></button>
      </div>
    </div>

    <div class="col-xs-10 ">
      <button type="submit" name="formAction" value="next" class="btn btn-primary">sUBMIT</button>

    </div>



  </fieldset>
</form>

Answer 1

您始终访问'[name="description-0"]'，因此当您将其名称更改为description-1 时，该选择器将不再选择它们。

你应该用这个选择器'[name^="description-"]'来选择它们。

^= 运算符表示选择以指定值开头的每个元素，因此它将选择您的所有description-0、description-1 和description-whatever。

您可以在此处阅读更多内容：https://www.w3schools.com/jquery/sel_attribute_beginning_value.asp

Answer 2

您可以通过简单地将[name="description-0"] 更改为[name="description-'+ (counter-1) +'"] 来修复它

问题是你close前一个对象，然后decription-0在第一个对象之后就不再是0了。

var dataList = $('.products');
var jsonOptions = [{
  "product": "11111",
  "description": "description 1"
}, {
  "product": "22222",
  "description": "description 2"
}, {
  "product": "33333",
  "description": "description 3"
}];

jsonOptions.forEach(function(item) {

  var option = '<option value="' + item.product + '">' + item.description + '</option>';

  dataList.append(option);
});

$(function() {
  $('body').on('input', '.product,.products', function() {

    var i = this.value;
    var description = "";
    var productsInBox = 0;

    jsonOptions.forEach(function(a) {
      if (a.product == i) {
        description = a.description;
      }
    });
    $(this).closest('.form-group').find('.description').val(description);


  });
});

counter = 0;

$('#form1').on('click', '.addButtonDED', function() {
    counter++;
    var $template = $('.form-group:last').clone(true, true).find('input').val('').end()
      .find('.addButtonDED').removeClass('addButtonDED').addClass('removeButtonDED').end()
      .find('[name="description-'+ (counter-1) +'"]').attr('name', 'description-' + counter).end()
      .find('i').removeClass('fa-plus').addClass('fa-minus').end();
    $template.insertAfter('.form-group:last');
  })

  // Remove button click handler
  .on('click', '.removeButtonDED', function() {
    counter--;
    var $row = $(this).closest('.form-group');
    $row.remove();
  });

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" method="post" class="form-horizontal" role="form">
  <fieldset>


    <div class="form-group">
      <div class="col-xs-2">
        <input type="text" list="products" class="form-control product" name="product" />
        <datalist id="products" class="products"></datalist>
      </div>

      <div class="col-xs-4">
        <input id="" type="text" class="form-control description" name="description-0" />
      </div>



      <div class="col-xs-1">
        <button type="button" class="btn btn-default addButtonDED"><i class="fa fa-plus"></i></button>
      </div>
    </div>

    <div class="col-xs-10 ">
      <button type="submit" name="formAction" value="next" class="btn btn-primary">sUBMIT</button>

    </div>



  </fieldset>
</form>

Answer 3

您的实际问题是 var $template = $('.form-group:last').clone(true, true) ，特别是 :last 位，这意味着它将抓住组底部的那个，因此 .find('[name="description-0"]') 只匹配第一次。之后，该元素将具有 name="description-1" 并且该调用不会找到它。

相反，总是抓住第一个元素：

var $template = $('.form-group').eq(0).clone(true, true)

Working jsFiddle

然而，

你为什么要增加你的姓名属性？

您是否将此数据发送到某些服务器端处理，例如php？如果是这样，为什么不使用数组语法：

    <input id="" type="text" class="form-control description" name="description[]" />

见HTML Element Array, name="something[]" or name="something"?

Answer 4

你可以使用.find('.description').attr('name', 'description-' + counter).end()

Fiddle link

$('#form1').on('click', '.addButtonDED', function() {
  counter++;

  var $template = $('.form-group:last').clone(true, true).find('input').val('').end()
    .find('.addButtonDED').removeClass('addButtonDED').addClass('removeButtonDED').end()
    .find('.description').attr('name', 'description-' + counter).end()
    .find('i').removeClass('fa-plus').addClass('fa-minus').end();
  $template.insertAfter('.form-group:last');
  alert(counter)
})