根据下拉选项更改结果输入 - jQuery + HTML

Question

I'm trying to build up a calculator using HTML and jQuery. So far I have:

HTML

<form accept-charset="UTF-8" action="#" id="calc" method="post">
    <div class="item-1">
        <label for="item-1">Item 1</label>
        <input class="income" id="item-1" size="50" />
        <select id="select-item-1" class="select">
            <option value="daily">Daily</option>
            <option value="weekly">Weekly</option>
            <option value="monthly">Monthly</option>
        </select>
    </div>
    <div class="item-2">
        <label for="item-2">Item 2</label>
        <input class="income" id="item-2" size="50" />
        <select id="select-item-2" class="select">
            <option value="daily">Daily</option>
            <option value="weekly">Weekly</option>
            <option value="monthly">Monthly</option>
        </select>
    </div>
    <div class="item-3">
        <label for="item-3">Item 3</label>
        <input class="income" id="item-3" size="50" />
        <select id="select-item-3" class="select">
            <option value="daily">Daily</option>
            <option value="weekly">Weekly</option>
            <option value="monthly">Monthly</option>
        </select>
    </div>
    <hr />
    <div class="grand-total">
        <label for="grand-total">Total :</label>
        <input id="grand-total" size="50" disabled />
        <select id="grand-total-filter" class="select">
            <option value="daily">Daily</option>
            <option value="weekly">Weekly</option>
            <option value="monthly">Monthly</option>
        </select>
    </div>
</form>

SCRIPT

var $form = $('#calc'),
    $summands = $form.find('.income'),
    $sumDisplay = $('#grand-total');

    $form.delegate('.income', 'change', function (){
        var sum = 0;
        $summands.each(function () {
            var value = Number($(this).val());
            if (!isNaN(value)) sum += value;
    });

    $sumDisplay.val(sum);
});

$("#grand-total-filter").change(function() {
        var e = document.getElementById("grand-total-filter");
        var strUser = e.options[e.selectedIndex].value;
        if (strUser == 'monthly' ) {
            // Monthly
        } else if (strUser == 'weekly' ) {
            // Weekly
        } else {
            //  Default (Daily)
        }
    });

Here is a working jsFiddle with the above bits: http://jsfiddle.net/4Q8Gh/1/

The idea is that the end user should be able to add the values (item1, item2 and item3) with any option (daily, monthly, weekly) - individually - so item1/item2/item3 could have any option (daily, weekly, monthly).

The results should be displayed by default in "daily" value and the result input can be once again filtered by any of the options: daily, weekly, monthly.

So for example we have:

1. item1 = 10 (daily)
2. item2 = 100 (weekly)
3. item3 = 1000 (monthly)

That gives us a TOTAL* of :

• Daily: 10 + (100/5) + (1000/20) = 80
• Weekly: (10*5) + 100 + (1000/4) = 400
• Monthly: (10*20) + (100*4) + 1000 = 1600

*based on the above example and considering that 1 week = 5 working days and 1 month = 4 weeks

At this point I'm lost and I'm not sure how can I throw these ideas into code using jQuery, so any help/guidance would be much much appreciated. Thanks in advance for any feedback!

PS If my approach is not correct for any reason I would be more than happy to hear your suggestions.

Answer 1

Make 1 function that performs the full calculation and then delegate your form INPUT and SELECT change events to it.

http://jsfiddle.net/RZpnz/

function calculate() {
    var sum = 0;
    $("#calc").find("input.income").each(function() {
        var val = parseFloat($(this).val());
        if(!isNaN(val)) {
            var unit = $("#select-" + this.id).val();
            switch(unit) {
                case "daily": sum += val; break;
                case "weekly": sum += val / 5; break;
                case "monthly": sum += val / (5 * 4); break;
                default: break;
            }
        }
    });
    var unit = $("#grand-total-filter").val();
    switch(unit) {
        case "daily": sum *= 1; break;
        case "weekly": sum *= 5; break;
        case "monthly": sum *= (5 * 4); break;
        default: break;
    }
    $("#grand-total").val(sum);
}
$("#calc").delegate("input.income", "change", calculate);
$("#calc").delegate("select.select", "change", calculate);