金額が反映されたタイミングで合計金額を処理したいです

###前提・実現したいこと
1回の処理で一人または、複数人の入会費を計算するアプリケーションをJavaScriptで作成しています。
アプリケーションは、一人から複数に対応するため「追加」ボタンと「削除」ボタンを設置しております。

また、種類、年のどちらかを指定するとイベントが発生しcalculate関数を実行されます。

金額が反映されたタイミングで合計金額を処理したいです。

以上、ご確認の程、よろしくお願い申し上げます。

###想定できること
受付担当者は入会する顧客の数だけ先にフォームを追加する
受付担当者は一人目を終えてからフォームを追加する
受付担当者は任意のタイミングでフォームを追加する
受付担当者は任意のタイミングでフォームを種類、年を変更する

###該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <style>
        tr, td {
            display: block;
        }

        tr {
            margin-bottom: 24px;
            border-bottom: 1px solid #000;
        }
    </style>
</head>
<body>
<div>
    <form action="#" method="post" id="theForm" novalidate>
        <table id="tbl1">
            <tbody>
            <tr>
                <td>
                    <label for="type">種類 </label>
                    <select name="type_1" id="type" required>
                        <option value="basic" selected>ベーシック - 1000円</option>
                        <option value="premium">プレミアム - 1500円</option>
                        <option value="gold">ゴールド - 2000円</option>
                        <option value="platinum">プラチナ - 2500円</option>
                    </select>
                </td>
                <td>
                    <label for="years">年</label>
                    <input type="number" name="years_1" id="years" min="1" required value="1">
                </td>
                <td>
                    <label for="cost">金額</label>
                    <input type="text" name="cost_1" id="cost" disabled value="1001">
                </td>
                <td><span class="add">追加</span></td>
            </tr>
            </tbody>
        </table>
        <div>
            <label for="gt">合計金額 </label>
            <input type="text" id="gt" name="gt" value="1001">
        </div>
        <div>
            <label for="cnt">カウント </label>
            <input type="number" id="cnt" name="cnt" value="1" disabled>
        </div>
    </form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">

    //追加ここから。
    var select_type = {
        basic: 1000,
        premium: 1500,
        gold: 2000,
        platinum: 2500
    };

    function calculateGrandTotalPrice(type, count){
        cgt = 0;
        for(i=0; i < count; i++) {
            if($('label[for="selling_price"] + div > input').val() != "") {
                cgt += parseInt($('label[for="selling_price"] + div > input').val());
            }
        }
        console.log(cgt);
        return $('#grand-total').val(JSON.stringify(cgt));
    }

    function calculate(type, years) {
        return (type + years);//今回は種類の金額と年の和を計算している。
    }
    //追加ここまで。

    window.onload = function () {
        'use strict';
        var cnt = document.getElementById('cnt').value;
    };

    //追加ここから。
    $("label[for='type'] + select").change(function () {
        var type = parseInt(select_type[$(this).val()]);
        var years = parseInt($(this).closest('td').next().find('input').val());
        var count = $('#cnt').val();
        console.log(count);

        $(this).closest('td').next().next().find('input').val(calculate(type, years));
        $(this).closest('div').find('input#gt').val(calculateGrandTotalPrice(type, count));
    });

    $("label[for='years'] + input").change(function () {
        var type = parseInt(select_type[$(this).closest('td').prev().find('select').val()]);
        var years = parseInt($(this).closest('input').val());
        var count = $('#cnt').val();
        console.log(count);

        $(this).closest('td').next().find('input').val(calculate(type, years));
        $(this).closest('div').find('input#gt').val(calculateGrandTotalPrice(type, count));
    });
    //追加ここまで。

    $(function () {
        var tbl = $('#tbl1');
        var row = tbl.find('tr:first-child').clone(true).append('<td><span class="delete">削除</span></td>');

        tbl.on('click', 'span.add', function () {
            tbl.find('tbody').append(row.clone(true));
            adjust();
        }).on('click', 'span.delete', function () {
            $(this).parents('tr').remove();
            adjust();
        });

        function adjust() {
            $('#tbl1 select[name^="type_"]').each(function (i) {
                var num = i + 1;
                $(this).attr('name', 'type_' + num);
                $(this).parents('td').next().find('input[name^="years_"]').attr('name', 'years_' + num);
            });
            $('#tbl1 input[name^="years_"]').each(function (i) {
                var num = i + 1;
                $(this).attr('name', 'years_' + num);
                $(this).parents('td').next().find('input[name^="cost_"]').attr('name', 'cost_' + num);
            });
            $("#cnt").val($('#tbl1 select[name^="type_"]').length);
        }
    });
</script>
</body>
</html>

行動規範の内容に同意します

回答2件

JavaScriptのイベントハンドラ一覧
http://phpjavascriptroom.com/?t=js&p=event

jQueryで登録済みイベントハンドラを一覧する方法
http://takuya-1st.hatenablog.jp/entry/2014/04/05/042658

投稿2017/03/08 06:19

退会済みユーザー

総合スコア0

自己解決

以下のようにすることで、問題をクリアできました。

HTML+JavaScript
1function calculateGrandTotalPrice(){
2    grandTotalPrice = 0;
3    $('input[name^="cost_"]').each(function (i) {
4        var num = i + 1;
5        grandTotalPrice += eval($(this).val());
6    });
7    return grandTotalPrice;
8}
9
10$("label[for='type'] + select").change(function () {
11    var type = parseInt(select_type[$(this).val()]);
12    var years = parseInt($(this).closest('td').next().find('input').val());
13    var count = $('#cnt').val();
14    console.log(count);
15
16    $(this).closest('td').next().next().find('input').val(calculate(type, years));
17    $(this).closest('div').find('input#gt').val(calculateGrandTotalPrice());
18});
19
20$("label[for='years'] + input").change(function () {
21    var type = parseInt(select_type[$(this).closest('td').prev().find('select').val()]);
22    var years = parseInt($(this).closest('input').val());
23    var count = $('#cnt').val();
24    console.log(count);
25
26    $(this).closest('td').next().find('input').val(calculate(type, years));
27    $(this).closest('div').find('input#gt').val(calculateGrandTotalPrice());
28});
29
30