フォームで入力された値を表示させたいです。
下記のように任意でフォームを追加・削除できるコードを書きました。
フォームの追加・削除は出来ているのですが、
保存して表示させようとすると一番最後の入力フォームの値だけしか入りませんでした。
フォームhtml
html
1{% extends "register/base.html" %}{% load crispy_forms_tags %}{% block content %} 2{{ form.certifications.errors }} 3<script src="https://code.jquery.com/jquery-3.4.1.js"></script> 4 5 <div id=money_box> 6 <div class="row"> 7 <div class="col-4"> 8 {{ form.money | as_crispy_field }} 9 {{ form.image | as_crispy_field }} 10 {{ form.memo | as_crispy_field }} 11 <input type="button" value="追加" class="add btn-primary"> 12 <input type="button" value="削除" class="del btn-primary"> 13 </div> 14 </div> 15 </div> 16 </form> 17 </div> 18</div> 19 20<script type="text/javascript"> 21$(document).on("click", ".add", function() { 22 $(this).parent().clone(true).insertAfter($(this).parent()); 23}); 24$(document).on("click", ".del", function() { 25 var target = $(this).parent(); 26 if (target.parent().children().length > 1) { 27 target.remove(); 28 } 29}); 30</script>
表示html
html
1<div class="row"> 2 <div class="col-3"> 3 <p>貯金箱</p> 4 </div> 5 <div class="col-9"> 6 <p>{{ item.vote }}</p> 7 </div> 8</div> 9<div class="row"> 10 <div class="col-3"> 11 <p>画像</p> 12 </div> 13 <div class="col-9"> 14 <p>{{ item.image }}</p> 15 </div> 16</div> 17<div class="row"> 18 <div class="col-3"> 19 <p>メモ</p> 20 </div> 21 <div class="col-9"> 22 <p>{{ item.memo }}</p> 23 </div> 24</div>
下記の場合は、一番最後のフォーム「500円、お小遣い」だけしか表示されませんでした。
↓↓↓↓表示↓↓↓↓↓
問題は、javascriptで値をうまく渡せていない、フォームの名前が同じだから上書きされる、と思っているのですが、解決策が自分では分からないので質問させていただきました。
どうすれば追加されたフォームを表示させることができるのでしょうか。
参考サイトなども教えていただけますと嬉しいです。
よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/04/05 13:51