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

【问题标题】：Adding params dynamically to form fields Rails and jQuery动态添加参数以形成字段 Rails 和 jQuery
【发布时间】：2018-03-18 18:06:30
【问题描述】：

我正在尝试使用一点 javascript 在rails 中创建一个动态表单我有一个问题我在使用pry 时只在输出中得到一行显然这是因为我对每个字段输入都有相同的参数，因为我使用 jQuery .clone，也许有人在类似的事情上苦苦挣扎可以分享一些知识，如何使用 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>

【问题讨论】：

标签： jquery ruby-on-rails ruby

【解决方案1】：

为什么不使用隐藏字段？在你的 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 以增加隐藏字段的值，但这应该很容易。

【讨论】：

谢谢@lacostenycoder 我正在研究它，我真的是 javascript 新手，可能需要我一晚上才能完成这项工作，谢谢您的输入
对我来说不是很有效，我仍然只得到最后一行，但这是一个领先谢谢！

【解决方案2】：

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

http://railscasts.com/episodes/403-dynamic-forms

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

【讨论】：

【解决方案3】：

我实际上设法通过更改每个字段的名称输入来解决这个问题，我只是添加了一个索引，我确信有一个更清洁的解决方案，但直到更好的解决方案！

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}]`;
  }); 
}

绑定.pry

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

【讨论】：