Change input result based on dropdown option - jQuery + HTML

Question

I am trying to create a calculator using HTML and jQuery. So far, I:

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 values ​​(item1, item2 and item3) with any option (daily, monthly, weekly) - individually - therefore item1 / item2 / item3 can have any possibility (daily, weekly, monthly) .

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

So, for example, we have:

• item1 = 10 (daily)
• item2 = 100 (weekly)
• item3 = 1000 (monthly)

This gives us 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 got lost and I'm not sure how I can pass these ideas into code using jQuery, so any help / guide would be very much appreciated. Thank you in advance for any feedback!

PS If my approach is unsuitable 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 delegates the INPUT and SELECT forms to you.

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);