动态添加参数以形成Rails和jQuery字段

我试图用一点javascript在rails中创建一个动态表单。我有一个问题，当使用

pry

时，我的输出中只有一行。显然，这是因为自从我使用jQuery以来，我对每个字段输入都有相同的参数。克隆，也许有人曾与类似的东西进行过斗争，可以分享一些知识，如何使用javascript动态地将索引添加到此表单中的参数？谢谢

jQuery来克隆元素

$(document).on("click", ".button-remove", function(e) {
  $(this).closest(".duplicate").remove();
    e.preventDefault();                    
});

$(".btn-add").click(function(e) {
    e.preventDefault();
    let cloned = $(".duplicate:last").clone();
    cloned.insertBefore(this);
    cloned.find(":text").val("");
});

要克隆的HTML

<div class="duplicate">
  <div class="row">
    <div class="col-md-4">
      <div class="form-group">
        <input class="form-control" type="text" 
         name="contribution[item_name]">
      </div>
    </div>

    <div class="col-md-4">      
      <div class="form-group">
        <label for="item_quantity">Number of items</label>
        <input min="1" class="form-control" 
        type="number" value="1"
        name="contribution[item_quantity]">
      </div>
    </div>

     <div class="col-md-4">
       <div class="form-group">
         <label for="contribution[item_type]">Category</label>
           <select class="form-control" 
           name="contribution[item_type]">
             <option value="1">Entrée</option>
             <option value="2">Plat</option>
             <option value="3">Dessert</option>
             <option value="4">Softs</option>
             <option value="5">Alcool</option>
             <option value="6">Autres</option>
           </select>
       </div>
         <a href="#" class="button-remove">
           Remove item
         </a> 
     </div>
   </div>
 </div>

<button class="btn-add">
  Add new row
</button>

项目数
类别
入口
小块地
甜点
软糖
醇
奥特雷斯
添加新行

为什么不使用隐藏字段？在html中的某个地方，即

<input id="form_group_id" name="form_group_id" type="hidden" value="1" />

比如：

    <div class="duplicate">
      <div class="row">
        <div class="col-md-4">
          <div class="form-group">
            <input class="form-control" type="text" 
             name="contribution[item_name]">
          </div>
        </div>

        <div class="col-md-4">      
          <div class="form-group">
            <label for="item_quantity">Number of items</label>
            <input min="1" class="form-control" 
            type="number" value="1"
            name="contribution[item_quantity]">
            <input id="form_group_id" name="form_group_id" type="hidden" value="1" />
          </div>
        </div>

         <div class="col-md-4">
           <div class="form-group">
             <label for="contribution[item_type]">Category</label>
               <select class="form-control" 
               name="contribution[item_type]">
                 <option value="1">Entrée</option>
                 <option value="2">Plat</option>
                 <option value="3">Dessert</option>
                 <option value="4">Softs</option>
                 <option value="5">Alcool</option>
                 <option value="6">Autres</option>
               </select>
           </div>
             <a href="#" class="button-remove">
               Remove item
             </a> 
         </div>
       </div>
     </div>

项目数
类别
入口
小块地
甜点
软糖
醇
奥特雷斯

---

您需要更新JS以增加隐藏字段的值，但这应该很容易。

我认为您尝试做的是在Railscasts关于动态表单的这一集中：

---

对于嵌套的动态表单（我认为这不是您的情况，只是以防万一），您可以使用。

我实际上通过更改每个字段的名称输入来解决这个问题，我只是添加了一个索引，我相信有一个更干净的解决方案，但直到更好的解决方案出现

function addParams(){
   let items = $('.duplicate').length;
   items -= 1;
  $('.duplicate:last input.item_name').attr('name', function() {
      return `contribution[item_name_${items}]`;
  });

  $('.duplicate:last input.item_quantity').attr('name', function() {
      return `contribution[item_quantity_${items}]`;
  });

  $('.duplicate:last select.item_type').attr('name', function() {
      return `contribution[item_type_${items}]`;
  }); 
}

捆绑，撬动

"contribution"=>{
"item_name"=>"un", 
"item_quantity"=>"1", 
"item_type"=>"1",
"item_name_1"=>"deux",
"item_quantity_1"=>"1", 
"item_type_1"=>"2",
"item_name_2"=>"trois",
"item_quantity_2"=>"1", 
"item_type_2"=>"3"
}

---

谢谢@lacostenycoder我正在研究它，我对javascript非常陌生，可能要花上一个晚上才能让它工作起来谢谢你的输入对我来说不太好，我仍然只得到最后一行，但这是领先的谢谢！