上の画像のようなフォームを作っていて、+ 設問グループを追加するをクリックすると
下の画像のようにフォームが追加されます。
この時に追加したフォームのQ.2が必要ありません。
フォームを追加する時は設問グループタイトルとQ.1だけを追加したいです。
拙い説明で大変申し訳ございません。
下記が現在のコードです。
ご教示いただけると幸いです。
html
1<div class="area_question_group_360" id="group1"> 2 <p class="ttl">設問グループタイトル</p> 3 <div class="wrap_input wrap_required group_ttl"> 4 <input placeholder="設問グループタイトルを記述" name="wholeAngleSurveyGroup.title[]" type="text"> 5 <div class="unit_2_center btn_delete_group" data-tabno="1">削除</div> 6 </div> 7 <div class="wrap_input question" id="question1"> 8 <span class="unit_2 number">Q. </span> 9 <div class="wrap_input wrap_required"> 10 <input placeholder="回答選択肢を記述" name="wholeAngleSurveyQuestion.title[0][]" type="text"> 11 </div> 12 <div class="unit_2_center button_text_delete_360">削除</div> 13 </div> 14 <div class="area_add_question_360"> 15 <div class="btnarea_left"> 16 <div class="button_text_add_question_360 add_question">設問を追加する</div> 17 </div> 18 <div class="note">※選択肢は上限20項目です。</div> 19 </div> 20</div> 21<div class="btnarea_left_add_group"> 22 <div class="btn_goast_purple_add_group" id="add_group">設問グループを追加する</div> 23</div> 24 25<script> 26 $(document).on('click', '#add_group', function() { 27 <?php //要素の数をカウントして、複製したフォームのnameを変更する ?> 28 classLength = $('[id^=group]').length; <?php //要素数 1, 2 ?> 29 selector = "#group"+(classLength); <?php //1つ前のID名 #group1, 2 ?> 30 newSelector = "group"+(classLength + 1); <?php //新しいID group2,3 ?> 31 <?php //クローン処理 ?> 32 $("#group1").clone(true).insertAfter(selector).attr('id', newSelector); 33 <?php //複製したものに関する調整処理 ?> 34 $("#" + newSelector).find("input").each(function(i, elm){ 35 elm.name = elm.name.replace(/[[0-9]+]/, '[' + classLength + ']'); 36 elm.id = elm.id.replace(/\-[0-9]+\-/, '-' + classLength + '-'); 37 elm.value = null; 38 }) 39 }); 40</script>
追記
読み込み時にcloneしたものを変数にいれました。
それをcloneする時に、 clone is not defined となります。。
<script> $(window).on('load', function() { var clone = $("#group1").clone(); }); </script> <script> $(document).on('click', '#add_group', function() { <?php //クローン処理 ?> $(clone).clone(true).insertAfter(selector).attr('id', newSelector); }); </script>