前提・実現したいこと
JavaScriptとLaravelで自動生成した入力フォームの値をリダイレクト時に保持したいです
現在、レシピを作成するアプリを作っており、食材の入力項目にテーブルとJavaScriptを使用しています。
追加ボタンを押すと、入力項目が追加、✖︎ボタンを押すと、項目が削除、動的に追加、削除ができます。
テーブルの追加削除の動きは問題はないのですが、リダイレクトを行った場合、追加削除したテーブルが無かったことになってしまい、入力した値も消えてしまいます。
リダイレクトで戻った際にも、テーブルと入力した値も元のままの状態にしたいです。
ご教授よろしくお願いします。
該当のソースコード
JavaScript
$(function(){ $(document).on('click', '#food_cre',function(){ var table = document.getElementById("food_table"); var row = table.insertRow(); //td分追加 var cell1 = row.insertCell(); var cell2 = row.insertCell(); var cell3 = row.insertCell(); var cell4 = row.insertCell(); // セルの内容入力 cell1.innerHTML = '<td class="foodname"><input class=foodtex value="" name="foodname[]" type="text" placeholder="食材名"></td>'; cell2.innerHTML = '<td class="foodnum"><input class=food_num value="" name="foodnum[]" type="text" placeholder="数量"></td>'; cell3.innerHTML = '<td class="foodunit"><select name="unit[]" class="unit"><option value="">単位</option><option value="cc">cc</option><option value="ml">ml</option><option value="g">g</option><option value="本">本</option><option value="個">個</option><option value="枚">枚</option><option value="束">束</option><option value="袋">袋</option><option value="缶">缶</option><option value="房">房</option><option value="切">切</option><option value="合">合</option><option value="適量">適量</option>'; cell4.innerHTML = '<td class="food_del"><button class="fooddel" name="del">✖︎</button></td>'; }); }); $(function(){ $(document).on('click', '.fooddel',function(){ let row = $(this).closest("tr").remove(); $(row).remove(); }); });
view
<table class="foodtable" id="food_table"> <thead class="foodhead"> <tr> <td class="foodname">材料名</td> <td class="foodnum">分量</td> <td class="foodnum">単位</td> </tr> </thead> <tbody class="foodbody"> <tr> <td class="foodname"><input class=foodtex value="{{ old('foodname.3') }}"name="foodname[]" type="text" placeholder="食材名"></td> <td class="foodnum"><input class=food_num value="{{ old('foodnum.3') }}" name="foodnum[]" type="text" placeholder="数量"></td> <td class="foodunit"> <select name="unit[]"> <?php $unit = old('unit.3'); ?> <option value="">単位</option> <option value="cc" @if($unit =='cc') selected="selected" @endif>cc</option> <option value="ml" @if($unit =='ml') selected="selected" @endif>ml</option> <option value="g" @if($unit =='g') selected="selected" @endif>g</option> <option value="本" @if($unit =='本') selected="selected" @endif>本</option> <option value="個" @if($unit =='個') selected="selected" @endif>個</option> <option value="枚" @if($unit =='枚') selected="selected" @endif>枚</option> <option value="束" @if($unit =='束') selected="selected" @endif>束</option> <option value="袋" @if($unit =='袋') selected="selected" @endif>袋</option> <option value="缶" @if($unit =='缶') selected="selected" @endif>缶</option> <option value="房" @if($unit =='房') selected="selected" @endif>房</option> <option value="切" @if($unit =='切') selected="selected" @endif>切</option> <option value="合" @if($unit =='合') selected="selected" @endif>合</option> <option value="適量" @if($unit =='適量') selected="selected" @endif>適量</option> </select></td> <td class="food_del"><button class="fooddel" name="del">✖︎</button></td> </tr> </tbody> </table> <button type="button" id="food_cre">追加</button> ``` ### 補足情報(FW/ツールのバージョンなど) laravel6 laravel/framework: "^6.2", "laravel/tinker": "^2.0", PHP7 ここにより詳細な情報を記載してください。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/02/20 08:47
2021/02/20 08:52