jQuery calculation on form txt fields

Question

looking for a bit of help with my jQuery, (i know its not the best)

Currently have a form, split into 2 sides, on the left I have a list of assests on the right is the liabilities somewhat of a balance sheet for account, see the image below

the jquery in use just now, is a bit of a mess.. (sorry) this code will calculate the field totals on each keyup request, which seems to work ok,

jQuery('#ass_cash, #ass_liquid, #ass_lifeinsu, #ass_covvalue, #ass_la1, #ass_la2, #ass_la3, #ass_realestate, #ass_auto1total, #ass_auto2total, #lib_mortgage, #lib_bankloan1, #lib_bankloan2, #lib_loansinsucomp, #lib_loanscreditunion, #lib_creditcards, #lib_od1, #lib_od2, #lib_od3, #lib_rent, #lib_mortgagemthpmt, #lib_bankloan1mthpmt, #lib_bankloan2mthpmt, #lib_loansinsucompmthpmt, #lib_loanscreditunionmthpmt, #lib_creditcardsmthpmt, #lib_od1mthpmt, #lib_od2mthpmt, #lib_od3mthpmt, #lib_rentmthpmt').keyup( function(){

// ASSESTS
var ass_cash = jQuery("#ass_cash").val();
var ass_liquid = jQuery("#ass_liquid").val();
var ass_lifeinsu = jQuery("#ass_lifeinsu").val();
var ass_covvalue = jQuery("#ass_covvalue").val();
var ass_la1 = jQuery("#ass_la1").val();
var ass_la2 = jQuery("#ass_la2").val();
var ass_la3 = jQuery("#ass_la3").val();
var ass_realestate = jQuery("#ass_realestate").val();
var ass_auto1total = jQuery("#ass_auto1total").val();
var ass_auto2total = jQuery("#ass_auto2total").val();
var ass_total = jQuery("#ass_total").val();

if(ass_cash==''){ ass_cash = 0; }
if(ass_liquid==''){ ass_liquid = 0; }
if(ass_lifeinsu==''){ ass_lifeinsu = 0; }
if(ass_covvalue==''){ ass_covvalue = 0; }
if(ass_la1==''){ ass_la1 = 0; }
if(ass_la2==''){ ass_la2 = 0; }
if(ass_la3==''){ ass_la3 = 0; }
if(ass_realestate==''){ ass_realestate = 0; }
if(ass_auto1total==''){ ass_auto1total = 0; }
if(ass_auto2total==''){ ass_auto2total = 0; }

var asssubtotal = parseInt(ass_cash) + parseInt(ass_liquid) + parseInt(ass_lifeinsu) + parseInt(ass_covvalue);

asssubtotal = asssubtotal + parseInt(ass_la1) + parseInt(ass_la2) + parseInt(ass_la3) + parseInt(ass_realestate);

asssubtotal = asssubtotal + parseInt(ass_auto1total) + parseInt(ass_auto2total);

var asstotal = jQuery('#ass_total');
asstotal.val(asssubtotal);

// LIABILITIES
var lib_mortgage = jQuery("#lib_mortgage").val();
var lib_bankloan1 = jQuery("#lib_bankloan1").val();
var lib_bankloan2 = jQuery("#lib_bankloan2").val();
var lib_loansinsucomp = jQuery("#lib_loansinsucomp").val();
var lib_loanscreditunion = jQuery("#lib_loanscreditunion").val();
var lib_creditcards = jQuery("#lib_creditcards").val();
var lib_od1 = jQuery("#lib_od1").val();
var lib_od2 = jQuery("#lib_od2").val();
var lib_od3 = jQuery("#lib_od3").val();
var lib_rent = jQuery("#lib_rent").val();

if(lib_mortgage==''){ lib_mortgage = 0; }
if(lib_bankloan1==''){ lib_bankloan1 = 0; }
if(lib_bankloan2==''){ lib_bankloan2 = 0; }
if(lib_loansinsucomp==''){ lib_loansinsucomp = 0; }
if(lib_loanscreditunion==''){ lib_loanscreditunion = 0; }
if(lib_creditcards==''){ lib_creditcards = 0; }
if(lib_od1==''){ lib_od1 = 0; }
if(lib_od2==''){ lib_od2 = 0; }
if(lib_od3==''){ lib_od3 = 0; }
if(lib_rent==''){ lib_rent = 0; }

var libsubtotal = parseInt(lib_mortgage) + parseInt(lib_bankloan1) + parseInt(lib_bankloan2) + parseInt(lib_loansinsucomp);

libsubtotal = libsubtotal + parseInt(lib_loanscreditunion) + parseInt(lib_creditcards) + parseInt(lib_od1) + parseInt(lib_od2);

libsubtotal = libsubtotal + parseInt(lib_od3) + parseInt(lib_rent);

var lib_subtotal = jQuery('#lib_subtotal');                 lib_subtotal.val(libsubtotal);                      

// MONTHLY PAYMENTS
var lib_mortgagemthpmt = jQuery("#lib_mortgagemthpmt").val();
var lib_bankloan1mthpmt = jQuery("#lib_bankloan1mthpmt").val();
var lib_bankloan2mthpmt = jQuery("#lib_bankloan2mthpmt").val();
var lib_loansinsucompmthpmt = jQuery("#lib_loansinsucompmthpmt").val();
var lib_loanscreditunionmthpmt = jQuery("#lib_loanscreditunionmthpmt").val();
var lib_creditcardsmthpmt = jQuery("#lib_creditcardsmthpmt").val();
var lib_od1mthpmt = jQuery("#lib_od1mthpmt").val();
var lib_od2mthpmt = jQuery("#lib_od2mthpmt").val();
var lib_od3mthpmt = jQuery("#lib_od3mthpmt").val();
var lib_rentmthpmt = jQuery("#lib_rentmthpmt").val();

if(lib_mortgagemthpmt==''){ lib_mortgagemthpmt = 0; }
if(lib_bankloan1mthpmt==''){ lib_bankloan1mthpmt = 0; }
if(lib_bankloan2mthpmt==''){ lib_bankloan2mthpmt = 0; }
if(lib_loansinsucompmthpmt==''){ lib_loansinsucompmthpmt = 0; }
if(lib_loanscreditunionmthpmt==''){ lib_loanscreditunionmthpmt = 0; }
if(lib_creditcardsmthpmt==''){ lib_creditcardsmthpmt = 0; }
if(lib_od1mthpmt==''){ lib_od1mthpmt = 0; }
if(lib_od2mthpmt==''){ lib_od2mthpmt = 0; }
if(lib_od3mthpmt==''){ lib_od3mthpmt = 0; }
if(lib_rentmthpmt==''){ lib_rentmthpmt = 0; }

var lib_surplus = jQuery('#lib_surplus');
if(lib_surplus==''){ lib_surplus = 0; }

var subtotal = parseInt(lib_mortgagemthpmt) + parseInt(lib_bankloan1mthpmt) + parseInt(lib_bankloan2mthpmt) + parseInt(lib_loansinsucompmthpmt);

subtotal = subtotal + parseInt(lib_loanscreditunionmthpmt) + parseInt(lib_creditcardsmthpmt) + parseInt(lib_od1mthpmt) + parseInt(lib_od2mthpmt);

subtotal = subtotal + parseInt(lib_od3mthpmt) + parseInt(lib_rentmthpmt);

var totalmthpmt = jQuery('#lib_totalmthpmt');
totalmthpmt.val(subtotal);

var assets_total = jQuery('#ass_total').val();
var lib_subtotal  = jQuery('#lib_subtotal').val();
var lib_surplus  = jQuery('#lib_surplus');

if(assets_total==''){ assets_total = 0; }
if(lib_subtotal==''){ lib_subtotal = 0; }
if(lib_surplus==''){ lib_surplus = 0; }

var surplus = assets_total - lib_subtotal;
lib_surplus.val(surplus);

// THIS IS THE PART THAT ISNT WORKING               
//surplus/deficit
//var lib_total = jQuery('#lib_total').val();
//if(lib_total==''){ lib_total = 0; }
//var lib_totalmthpmt = jQuery('#lib_totalmthpmt').val();
//if(lib_totalmthpmt==''){ lib_totalmthpmt = 0; }

//var surplustotal = lib_total - lib_totalmthpmt;
//jQuery('#mthsurplus').val(surplustotal);
});

you can see the section which is causing issues above, its the calculation between the subtotal (minus) Surplus to generate the total,

each field for asset has a class .asset each libability has class .liability each monthly payment field has class .liabilitymth

Ive tried doing the jQuery('.asset').each(function() and trying to generate the total in the asset field, same for the other 2, sections,

the greyed out boxes are "readonly", were the calculations should appear.

ASSETS: The total on the left side of the page will be the total assets. LIABILITIES: The 'Subtotal' will reflect the sum of the Liability column. SURPLUS: This will represent the difference (Negative'-' OR Positive'+'), between the Assets & Liabilities-Balance column.

TOTAL(Right Side): This is to create a 'Balance Sheet'effect, so when you look at it, the calculation should reflect the same figure as the 'Total' over on the Asset side (Left side).

MONTHLY-SURPLUS/ DEFICIT: This should reflect the net difference in Total Income Revenue, either negative OR positive (Figure found From the Employment Tab), when compared with the total of the 'Monthly Payment' column.

this is where my jQuery falls flat on its face, there has to be an easier way to calculate the field totals, anyone shed any light on this, or have a much better use of code, rather than wrapping it all under a very large keyup request :)

Answer 1

If you do the calculation in the keyup or any other key events, then there will be a problem of keeping track of the old data that was entered. For ex., at an instant you had typed 50 and then you made it to 500 and then you made it to say 30. Then, the keyevent will not be able to figure out the difference between both the old and new data. You will have to write some logic to figure out the old and the new updated data and then depending on that you will have to update the final value. It is better if you can code something like this...

http://jsfiddle.net/AvSEG/

Answer 2

This can give you the head start:

var totalAss = 0;
jQuery('.asset').each(function(){
    var value = parseFloat(this.value);
    if (value)
        totalAss += value;
});
jQuery('#ass_total').val(totalAss);

Answer 3

There is indeed some easy way. Do things like that

on all classes means .assets , .liability and .liabilitymth do this on document.ready

$(function()
{
$('.assets , .liability ,.liabilitymth').each(function()
{
        var value = $(this).val();
        if(value == "")
        {
            $(this).val('000.00');
        }   
});

});

And now

var total_assets = 0;
$('.assets').keyup(function(){
      var number = $(this).val();
       total_assets += parseInt(number);
});

After that

$('#total_assets').val(total_assets);