Q&A
質問編集画面タイトル横にある「初心者アイコン」をご活用ください。「初心者」と質問で書くよりも伝わりますし、質問一覧に表示されるのでわかりやすくなります。
初心者です。
現在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>
$('#id_form-'+i+'-kosu').val() ←これで入力した情報は正しく取得できていますか？また「時間」はどのような形式で入力されるのを想定していますか？ありえない時間（9999など）が入力された場合については今のところ考慮していないということでよろしいでしょうか。
初心者アイコンの件、承知しました。ありがとうございます。
$('#id_form-'+i+'-time').val() の誤りでした。現状、id_form-5-timeの値のみ取得できているようです。また、時間は数値型で入力されることを想定しありえない時間等は今のところ考慮しておりません。別途バリデーション対応などを考えています。
回答2件
0
質問の重点がどこにあるかわかりません
単純にform内の特定の条件のついた要素を足すだけならこう
javascript
1<script> 2$(function(){ 3 $('.calc').on('click',function(){ 4 var v=$(this).closest('form').find('.hoge').map(function(){ 5 return parseInt($(this).val()); 6 }).get().reduce(function(x,y){return x+y}); 7 console.log(v); 8 }); 9}); 10</script> 11<form> 12<input type="text" class="hoge" name="a" value="1"><br> 13<input type="text" class="hoge" name="b" value="2"><br> 14<input type="text" class="hoge" name="c" value="3"><br> 15<input type="button" value="calc" class="calc"> 16</form>
それとも時間の和の仕方がわからないのでしょうか？
投稿2018/08/08 01:10
総合スコア114775
ご回答ありがとうございます。
今回は時間(time)の和の仕方が分かりません。
対象の要素数を取得して、その要素数回和をとっていくことを考えていました。
時間の形式はhh:mm:ss、hh:mm、その他どれでしょう？
仮にhhが24時間を超えた場合、日に繰り上がるのかそのままたされるのか？
仕様がわからないのでなんともいいようがないですね
時間は数値型で、分単位の入力になります。
0130＋0240=0410ですか？
2500はありですか？
0130を130と表示する可能性はありますか？
1時間に満たないデータは0030、030、30のどれ？
すみません、説明不足でした。
時間とは工数(分)という意味で、
35+40=75(分)
130+240=370(分)
という形です。
なるほど、すべてが分だけで整数値で処理されているのですね
であれば最初に私が提示したものがまさに整数値の合計を計算する処理です
生成されるHTMLは以下のようになります。
この場合、共通しているnumberに対してvalueの和をとるということでしょうか？
<td><input type="text" name="form-0-summary" value="12344" maxlength="50" id="id_form-0-summary" /></td>
<td><input type="number" name="form-0-time" value="1" id="id_form-0-kosu" /></td>
<td><input type="text" name="form-0-memo" maxlength="50" id="id_form-0-memo" /></td>
<td><input type="text" name="form-1-summary" maxlength="50" id="id_form-1-summary" /></td>
<td><input type="number" name="form-1-time" value="1" id="id_form-1-kosu" /></td>
<td><input type="text" name="form-1-memo" maxlength="50" id="id_form-1-memo" /></td>
0
自己解決
より良いコードがあるかもしれませんが、
現状以下をページ初期表示時と動的なフォーム追加時に実行させるようにしました。
function update_field(){
var current_count = parseInt($('input#id_form-TOTAL_FORMS').val());
var result = 0;
for(var i = 0; i < current_count; i++){
result = result + parseInt($('#id_form-'+i+'-kosu').val()) ;
$('#total').text(result);
}
}
$(function() {
$('input[type="number"]').on('keyup change', function() {
update_field();
});
});
投稿2018/08/14 06:51
総合スコア11
あなたの回答
tips
プレビュー
