初心者です。
現在Djangoのformsetを利用したフォームを作成しています。
下記のHTMLでは追加ボタンを押下すると各入力項目のフォームを追加するJSを記述しています。
やりたいことは、動的に追加した項目(今回は時間(time)を対象)の合計を<span id="total"></span>に表示することです。
timeは分単位の入力で、30+40+90=160という形で和を求めたいと考えています。
追加した後のフォーム数を取得して、その数で繰り返し処理すること考えていましたがうまく更新されません。
JavaScriptやJQueryで処理する方法をご教示ください。
html
1{% block title %}新規登録{% endblock title %} 2<h4>{{ indate }}</h4> 3<!doctype html> 4<html lang="ja"> 5<head> 6 <!-- Required meta tags --> 7 <meta charset="utf-8"> 8 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 9 10 <!-- Bootstrap CSS --> 11 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" 12 integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous"> 13 14 <title>テスト</title> 15</head> 16 17<body> 18<style> 19 table { 20 table-layout: fixed; 21 } 22 .table tr td { 23 border: 1px solid #eceeef; 24 } 25</style> 26<form action="" method="POST"> 27 {{ form.management_form }} 28 <table class="table"> 29 <thead> 30 <tr> 31 <th>大項目</th> 32 <th>概要</th> 33 <th>時間</th> 34 <th>備考</th> 35 </tr> 36 </thead> 37 38 <tbody id="answers"> 39 {% for fm in form %} 40 {{ fm.id }} 41 {{ fm.errors }} 42 <tr> 43 <td>{{ fm.LargeItem }}</td> 44 <td>{{ fm.summary }}</td> 45 <td>{{ fm.time }}</td> 46 <td>{{ fm.memo }}</td> 47 </tr> 48 {% endfor %} 49 </tbody> 50 </table> 51 52 <button id="add" type="button" class="btn btn-primary">追加</button> 53 <button type="submit" class="btn btn-primary">送信</button> 54 <a href="{% url 'mycalendar:month_with_schedule' %}" class="btn btn-primary">戻る</a> 55 <br> 56 <br> 57 <span id="total"></span>です。 58 {% csrf_token %} 59</form> 60 61<!-- Optional JavaScript --> 62<!-- jQuery first, then Popper.js, then Bootstrap JS --> 63<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 64 integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 65 crossorigin="anonymous"></script> 66<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" 67 integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" 68 crossorigin="anonymous"></script> 69<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" 70 integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" 71 crossorigin="anonymous"></script> 72 73<script> 74$(function(){ 75 var current_count = parseInt($('input#id_form-TOTAL_FORMS').val()); 76 $('button#add').on('click', function(){ 77 var element = `<tr><td><select name="form-${current_count}-LargeItem" id="id_form-${current_count}-LargeItem"> 78 <option value="" selected>---------</option> 79 <option value="test1</option> 80 <option value="test2</option> 81 </select> 82 <td><input type="text" name="form-${current_count}-summary" maxlength="50" id="id_form-${current_count}-summary" /></td> 83 <td><input type="number" name="form-${current_count}-time" value="0" id="id_form-${current_count}-time" /></td> 84 <td><input type="text" name="form-${current_count}-memo" maxlength="50" id="id_form-${current_count}-memo" /></td></tr>`; 85 $('tbody#answers').append(element); 86 current_count += 1; 87 $('input#id_form-TOTAL_FORMS').attr('value', current_count); 88 }); 89}); 90 91function update_field(){ 92 var current_count = parseInt($('input#id_form-TOTAL_FORMS').val()); 93 var result = 0; 94 for(var i = 0; i < current_count; i++){ 95 var result = $('#id_form-'+i+'-time').val() ; 96 $('#total').text(result); 97 } 98} 99$(function() { 100 $('input[type="number"]').on('keyup change', function() { 101 update_field(); 102 }); 103}); 104 105</script> 106</body>
回答2件
あなたの回答
tips
プレビュー