Javascript Page Load Total

Question

I've created a form that is used to calculate monthly expenses. The problem I'm having is on the last page I'm gathering information from previous pages (session to data) that auto fills the fields on the last page. I've created a javascript that is suppose to subtract the five fields on the page for a grand total but this doesn't work. If I delete the session to data from the load section the javascript works perfectly.

Page in Question: http://www.garranteedsolutions.com/budget?chronoform=BudgetPage7

Javascript:

 window.addEvent('domready', function() {
 $('spendable').addEvent('change', rekenen1);
 $('housetotal').addEvent('change', rekenen1);
 $('cartotal').addEvent('change', rekenen1);
 $('creditortotal').addEvent('change', rekenen1);
 $('misctotal').addEvent('change', rekenen1);
});
function rekenen1(){
$('grandtotal').value = Number($('spendable').value) + Number($('housetotal').value) +   Number($('cartotal').value) + Number($('creditortotal').value) + Number($('misctotal').value) ;
}

This is the code that I had been using but it requires a change in the form box to perform the action. I've tried this

Javascript:

window.addEvent('domready', function() {
rekenen1;
 $('spendable').addEvent(rekenen1);
 $('housetotal').addEvent(rekenen1);
 $('cartotal').addEvent(rekenen1);
 $('creditortotal').addEvent(rekenen1);
 $('misctotal').addEvent(rekenen1);
 });
 function rekenen1(){
 $('grandtotal').value = 
Number($('spendable').value) + Number($('housetotal').value) 
+ Number($('cartotal').value) + Number($('creditortotal').value) 
+ Number($('misctotal').value);
}

This is a continuation of me searching for help starting here: http://www.chronoengine.com/forums/viewtopic.php?f=2&t=67427&p=269741#p269741

I don't know Javascript very well and I'm so close to having this form completed. I just can't get the Grand Total to tally up.

Answer 1

The problem is that the events are only firing when you change the values of the form. The form its readonly so they cannot be changed.

Anyway, here is the code optimized:

window.addEvent('domready', function() {
    var rekenen1 = function(){
        var grandTotal = 0;
        $$('#spendable, #housetotal, #cartotal, #creditortotal, #misctotal').each(function(el){
            if(el.value.length > 0) grandTotal += el.value.toFloat();
        });
        $('grandtotal').value = grandTotal;
    };
    $$('#spendable, #housetotal, #cartotal, #creditortotal, #misctotal').addEvent('onchange', refenen1);
});

That should work. The function checks if the fields have value on them and if they have, they are included in the calculation.

The second code you made fires the error because you are missing a parameter in the addEvent function.

I hope that this can help you :)

Answer 2

This seemed to work! So now I'm trying to figure out how to get commas for the thousands. So if I input 1200 it displays 1,200.

window.addEvent('domready', function() {
$('grandtotal').value = Number($('spendable').value) + Number($('housetotal').value) + Number($('cartotal').value) + Number($('creditortotal').value) + Number($('misctotal').value);
});

Thank you so much for your help!