初学者です。
現在、springbootの tymeleafを使用しwebを作成しています。
初歩的なことで申し訳ないのですが、
下記どうしても実現できずに方法をご教示いただけますでしょうか。
■成果物
・フォーム数を追加削除で動的に変更が可能な入力フォーム画面〜登録ページ
・「追加する」で今あるフォームの下に1つずつフォームが追加
・「削除する」でボタンの直ぐ上のフォームのみを削除
※画像のフォーム、上からフォーム①、その下を②とします。
■やりたいこと
入力画面:フォーム①、②の合計2フォームを入力
↓
「確認画面」へ遷移
↓
確認画面:「戻る」ボタンにて入力フォームへ遷移し、フォーム②を削除
■起っていること
・「確認画面」⇒「入力画面」へ戻った際、
フォーム①②で1フォームになってしまう
画像のように各フォームの下に「削除する」ボタンがあり、
削除できるようにしたいのですが、遷移してしまうと
フォーム①の下から「削除する」ボタンが消え、
②の下のみに「削除する」「追加する」ボタンがある状態です。
また「追加する」ボタンを押下すると、フォーム①②がまとまってそのまま下に複製されます。
(合計4フォームできてしまいます)
(「確認画面」へ遷移する前は、各フォーム追加・削除できます。)
■教えていただきたいこと
調べたところonUnloadイベントハンドラを使えばよいのかと思ったのですが、
使い方が分からず実践できていないところもあり、
上記実現できる方法を教えていただきたいです。
コードの表示
HTML,Javascript
1<!DOCTYPE html> 2<html> 3 4<form action="demo.html" class="repeater"> 5 <div id="myform-block"> 6 <div id="myform-unit" class="counter"> 7 <fieldset class="app" th:each="myform,stat :${inputmyformList}"> 8 9 <legend class="app">フォーム</legend> 10 <div class="form-group"> 11 <label>あだ名</label><br> 12 <input type="text" class="form-control array" id="adana" 13 th:field="*{inputmyformList[__${stat.index}__].adana}"/> 14 </div> 15 16 <div class="form-group"> 17 <label for="lang">血液型</label><br> 18 <input type="text" class="form-control array" id="blood" 19 th:field="*{inputmyformList[__${stat.index}__].inputblood}"/> 20 </div> 21 </fieldset> 22 23 <input class="delete-button" type="button" value="削除する" /> 24 </div> 25 </div> 26 <br> <input id="add-button" type="button" value="追加する" /> 27</form> 28 29 30 31<!--js--> 32<script src="https://code.jquery.com/jquery-3.3.1.js"></script> 33<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 34<script type="text/javascript"> 35$(function() { 36 37 var unitIndex = function() { 38 return $('.counter').length - 1; //配列のインデックス番号を実際の数よりー1 39 }; 40 41 $('#add-button').click(function() { 42 43 var clonecode = $('.counter:last') .clone(true); 44 45 clonecode.appendTo('#myform-block'); //1form追加 46 47 clonecode.find('.array') 48 .each( 49 function(i, ele) { //i=各繰り返し処理で実行したい関数 / ele =繰り返し処理中の要素を参照 50 var regex = /^inputmyformList[[0-9]]/; //入力値チェックの準備 51 var name = $(ele).attr('name'); 52 if (regex.test(name)) { //nameがregexかマッチング 53 $(ele).attr('name',name.replace(regex,'inputmyformList['+ unitIndex()+ ']'));//IndexNoを書き換える 54 } 55 }); 56 57 //HTMLに追加 58 clonecode.insertAfter($('.counter:last')); 59 }); 60 61 //削除 62 $('.delete-button').click(function() { 63 64 //クリックされた削除ボタンの親要素を削除 65 $(this).parents(".counter").remove(); 66 67 var scount = 0; 68 //番号振り 69 $('.counter') .each(function(){ 70 $(this).find('.array') 71 .each( 72 function(i, ele) { 73 74 75 var regex = /^inputmyformList[[0-9]]/; //入力値チェックの準備 76 var name = $(ele).attr('name'); 77 if (regex.test(name)) { 78 $(ele).attr('name',name.replace(regex,'inputmyformList['+ scount + ']'));//IndexNoを書き換える 79 } 80 }); 81 scount += 1; 82 }); 83 84 }); 85 86}); 87 88</script> 89</html>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/12/14 07:56