前提・実現したいこと
・動的に追加、削除できるフォームを作りたい
・新たに追加されたフォームのValue値をサーバー側で受け取りたい
フォームはドロップダウンでカテゴリを選び、テキストで文字列を入力できるタイプのものです。
該当のソースコード
html
1<div class="md-form input-group"> 2 <div id="form-block" class="md-form input-group"> 3 <div class="dropdown input-group-prepend"> 4 <button class="btn btn-primary m-0 dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" value="">Dropdown</button> 5 <ul class="dropdown-menu"> 6 <li><a href="#" class="dropdown-item" value="aaa">aaa</a></li> 7 <li><a href="#" class="dropdown-item" value="bbb">bbb</a></li> 8 <li><a href="#" class="dropdown-item" value="ccc">ccc</a></li> 9 <li><a href="#" class="dropdown-item" value="ddd">ddd</a></li> 10 </ul > 11 <input type="hidden" class="form-control" id="dropdown-value" name="dropdown-value" aria-label="" value=""> 12 </div> 13 <input type="text" class="form-control" aria-label="Text input with dropdown button"> 14 </div> 15</div> 16<div class="mx-auto text-center"> 17 <button type="button" value="+" class="btn btn-sm btn-default add">+</button> 18 <button type="button" value="-" class="btn btn-sm btn-default del" disabled>-</button> 19</div> 20
JS
1$(function(){ 2 $('.dropdown-menu .dropdown-item').click(function(){ 3 // ドロップダウン項目の表示を変更 4 var visibleItem = $('.dropdown-toggle', $(this).closest('.dropdown')); 5 var dropdown_value = $(this).attr('value'); 6 visibleItem.text(dropdown_value); 7 // input[type=hidden]にドロップダウン項目を入れる 8 var hidden_form = $(this).closest('.dropdown-menu').next(); 9 hidden_form.val(dropdown_value); 10 }); 11 12 // +ボタン(class="add")がクリックされたら 13 $(document).on("click", ".add", function () { 14 //今あるフォームの数を取得 15 var count = $('div[id^=form-block]').length; 16 var originalForm = $('#form-block'); 17 18 // formが4つになったら.addをdisabled 19 if(count===4){ 20 $('.add').prop("disabled", true); 21 }else{ 22 //.delを押せるように変更 23 $('.del').prop("disabled", false); 24 } 25 26 originalForm 27 .clone(true) 28 .insertAfter(originalForm) 29 .attr('id', 'form-block[' + count + ']'); 30 }); 31 32 // -ボタン(class="del")がクリックされたら 33 $(document).on("click", ".del", function () { 34 var count = $('div[id^=form-block]').length; 35 36 // formが1つになったら.dellをdisabled 37 if(count===1){ 38 $('.del').prop("disabled", true); 39 } 40 var originalForm = $('form-block[' + count + ']'); 41 originalForm.remove(); 42 }); 43});
試したこと・問題
オリジナルのフォームformAをコピーして追加することはできました。
しかし新たに追加したフォーム(formB)のドロップダウン項目を変更するとformAのドロップダウン項目が変更されます。
また、追加したフォームを削除することができません。
初めて質問させて頂きます。わかりにくいところなどご指摘いただけますと幸いです。
よろしくお願いします。
補足情報(FW/ツールのバージョンなど)
Laravel5.5
Bootstrap4.1.3
jquery3.3.1
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/10/22 01:45 編集
2018/10/22 01:59
2018/10/22 08:12