上の画像のようなラジオボタンを含むフォームを複製できるようにしたいです。
html
1<ul class="list_form type_wall" id="wall_paper1"> 2 <li id="form_color_01" class="required"> 3 <article> 4 <div class="ttl_form"> 5 <p class="ttl">カラー</p> 6 </div> 7 <div class="cnt_form"> 8 <div class="wrap_input"> 9 <div class="wrap_radio"> 10 <?php 11 $this->Form->setTemplates([ 12 'nestingLabel' => '{{input}}<label{{attrs}}><div class="img"></div><span>{{text}}</span></label>', 13 'formGroup' => '{{input}}', 14 ]); 15 ?> 16 <?= $this->Form->radio('wall_color.0', [ 17 ['value' => '1', 'text' => 'ブルー', 'checked' => 'checked'], 18 ['value' => '2', 'text' => 'レッド'], 19 ['value' => '3', 'text' => 'ブルーxパープル'] 20 ]); 21 ?> 22 </div> 23 </div> 24 </div> 25 </article> 26 </li> 27 <li> 28 <div class="btnarea"> 29 <a class="btn_add" id="add_wall">施工面を増やす</a> 30 </div> 31 </li> 32</ul>
出力後のhtml(複製した後)
html
1<ul class="list_form type_wall" id="wall_paper1"> 2 <li id="form_color_01" class="required"> 3 <article> 4 <div class="ttl_form"> 5 <p class="ttl">カラー</p> 6 </div> 7 <div class="cnt_form"> 8 <div class="wrap_input"> 9 <div class="wrap_radio"> 10 <input type="hidden" name="wall_color[0]" value=""> 11 <input type="radio" name="wall_color[0]" value="1" checked="checked" id="wall-color-0-1"> 12 <label for="wall-color-0-1"> 13 <div class="img"></div> 14 <span>ブルー</span> 15 </label> 16 <input type="radio" name="wall_color[0]" value="2" id="wall-color-0-2"> 17 <label for="wall-color-0-2"> 18 <div class="img"></div> 19 <span>レッド</span> 20 </label> 21 <input type="radio" name="wall_color[0]" value="3" id="wall-color-0-3"> 22 <label for="wall-color-0-3"> 23 <div class="img"></div> 24 <span>ブルーxパープル</span> 25 </label> 26 </div> 27 </div> 28 </div> 29 </article> 30 </li> 31 <li> 32 <div class="btnarea"> 33 <a class="btn_add" id="add_wall">施工面を増やす</a> 34 </div> 35 </li> 36</ul> 37<ul class="list_form type_wall" id="wall_paper2"> 38 <li id="form_color_01" class="required"> 39 <article> 40 <div class="ttl_form"> 41 <p class="ttl">カラー</p> 42 </div> 43 <div class="cnt_form"> 44 <div class="wrap_input"> 45 <div class="wrap_radio"> 46 <input type="hidden" name="wall_color[1]" value> 47 <input type="radio" name="wall_color[1]" value checked="checked" id="wall-color-1-1"> 48 <label for="wall-color-0-1"> 49 <div class="img"></div> 50 <span>ブルー</span> 51 </label> 52 <input type="radio" name="wall_color[1]" value id="wall-color-1-2"> 53 <label for="wall-color-0-2"> 54 <div class="img"></div> 55 <span>レッド</span> 56 </label> 57 <input type="radio" name="wall_color[1]" value id="wall-color-1-3"> 58 <label for="wall-color-0-3"> 59 <div class="img"></div> 60 <span>ブルーxパープル</span> 61 </label> 62 </div> 63 </div> 64 </div> 65 </article> 66 </li> 67 <li> 68 <div class="btnarea"> 69 <a class="btn_add" id="add_wall">施工面を増やす</a> 70 </div> 71 </li> 72</ul>
jquery
1$('#add_wall').on('click', function () { 2 <?php // 要素の数をカウントして、複製したフォームのnameを変更する ?> 3 classLength = $('[id^=wall_paper]').length; //要素数 1, 2 4 selector = "#wall_paper"+(classLength); //1つ前のID名 #company1, 2 5 newSelector = "wall_paper"+(classLength + 1); //新しいID company2,3 6 <?php // クローン処理 ?> 7 $("#wall_paper1").clone(true).insertAfter(selector).attr('id', newSelector); 8 <?php // 複製したものに関する調整処理 ?> 9 $("#" + newSelector).find("input").each(function(i, elm){ 10 elm.name = elm.name.replace(/[[0-9]+]/, '[' + classLength + ']'); 11 elm.id = elm.id.replace(/\-[0-9]+\-/, '-' + classLength + '-'); 12 elm.value = null; 13 }); 14});
現状はwall_colorというnameのフォームを複製するとwall_color[0], wall_color[1]というように
配列でサーバー側にポストするようにしています。
それに伴いlabelのforの値も変更したいのです。
今は
<label for="wall-color-0-1">(ブルー)<label for="wall-color-0-2">(レッド)<label for="wall-color-0-3">(ブルーxパープル)
とういう風にlabelのforの値が変わらないので複製したラジオボタンが動作しない状態です。
どなたかご教示いただけると幸いです。