動的に増えるフォームを作成し、番号を振り配列にしているのですがnameのみ番号が振られないためデータベースに上手く格納できません。
html
1<div class="materials_field"> 2 <%= form.fields_for :materials do |material| %> 3 <div class="material_field" id="material_field[0]"> 4 <%= material.text_field :name ,placeholder: "食材", id:"name[0]"%> 5 <%= material.text_field :amount, placeholder: "量",id:"amount[0]"%> 6 </div> 7 <% end %> 8 <%= form.button '▽追加する', id: "add_btn",type: "button"%> 9 </div>
↓出力結果です
html
1 2<div class="material_field" id="material_field[0]"> 3 <input placeholder="食材" id="name[0]" type="text" name="recipe[materials_attributes][0][name]" /> 4 <input placeholder="量" id="amount[0]" type="text" name="recipe[materials_attributes][0][amount]" /> 5 <div class="material_field" id="material_field[1]"> 6 <input placeholder="食材" id="name[1]" type="text" name="recipe[materials_attributes][0][name]" /> 7 <input placeholder="量" id="amount[1]" type="text" name="recipe[materials_attributes][0][amount]" /> 8 </div> 9</div>
js
1$(function(){ 2 // フォームカウント 3 var frm_cnt =0; 4 // クローン 5 $('#add_btn').on('click', function(){ 6 var original = $('#material_field\[' + frm_cnt + '\]'); 7 var originCnt = frm_cnt; 8 9 frm_cnt++; 10 11 original 12 .clone(true) 13 .appendTo(original) 14 .attr('id', 'material_field[' + frm_cnt + ']') 15 .end() 16 .find('input, text_field').each(function(idx, obj) { 17 $(obj).attr({ 18 id: $(obj).attr('id').replace(/[[0-9]]+$/, '[' + frm_cnt + ']'), 19 name: $(obj).attr('name').replace(/[[0-9]]+$/, '[' + frm_cnt + ']') 20 }); 21 $(obj).val(''); 22 }); 23 }); 24 }); 25
text_field:name
の:name
部分を配列にしたい場合はjqueryでどのように指定したら良いのか分からず質問しました。
↓理想の出力結果です
HTML
1<div class="material_field" id="material_field[0]"> 2 <input placeholder="食材" id="name[0]" type="text" name="recipe[materials_attributes][0][name]" /> 3 <input placeholder="量" id="amount[0]" type="text" name="recipe[materials_attributes][0][amount]" /> 4 <div class="material_field" id="material_field[1]"> 5 <input placeholder="食材" id="name[1]" type="text" name="recipe[materials_attributes][1][name]" /> 6 <input placeholder="量" id="amount[1]" type="text" name="recipe[materials_attributes][1][amount]" /> 7 </div> 8</div> 9 10
上手く説明ができていないかもしれませんが、回答よろしくお願いします。
あなたの回答
tips
プレビュー