Forums

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

if you need to edit the fields I've created this page:
http://www.garranteedsolutions.com/budget?chronoform=BudgetPage8

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

Thank you,
Carl

Hi Carl,

I think that the problem is that the function is fired onChange of the input boxes but as these are 'readonly' they can't be changed and so the function never runs.

Try adding rekenen1; to the lines in the domready block to run it when the page loads.

The Session to Data action runs in PHP on the server when the page loads so can't have any direct affect on the JavaScript.

Bob

So like this? Please excuse my ignorance. I'm an amateur to javascript.

Javascript:

window.addEvent('domready', function() {
  $('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) ;
}

If this is correct then it didn't work either😟

Hi ManofStyle,

I don't see what you've changed there? Please try

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

Bob

I had deleted the 'change' for each line item. Anyway, I copied your code and still nothing is populating in the grandtotal. Also in the on load section should the "Session to Data" become before the Load JS? This is how I have it setup. I figured I'd want the info populated so javascript would have something to process. Just making sure this is setup correctly.

[attachment=0]Screen Shot 2012-03-17 at 8.39.18 AM.png[/attachment]

Hi ManofStyle,

Please turn off the Dynamic option in the Load JS action.

Bob

Still no success. In the console I'm getting the following error:

Uncaught TypeError: Object function rekenen1(){
  $('grandtotal').value = 
    Number($('spendable').value) + Number($('housetotal').value) 
    + Number($('cartotal').value) + Number($('creditortotal').value) 
    + Number($('misctotal').value);
} has no method 'indexOf'

Hi,

I'm not sure why do you get errors with your code, but it should make it easier to find why if you can cut your code into smaller pieces and test them to be able to identify where is the problem, e.g: start using:

$('grandtotal').value = 
    Number($('spendable').value);

Also try checking any functions syntax in the Mootools docs, they have V1.4, so if you have Joomla 1.5 with Mootools enabled (1.2) then there may be some differences.

Regards,
Max

I've tried breaking down the JS to single elements and it didn't work with any of the fields. I put the 'change' syntax back in the JS for Page 8 and it did work. So getting the JS to work correctly on load is the road block where I'm at. I don't know what else to do. The functions syntax in the Mootools docs make no sense to me.

Hi Manofstyle,

Sorry, I missed the obvious :-( Removing the 'change's is a really bad idea. The result isn't correct and causes an error

$('spendable').addEvent(rekenen1);

It should be

$('spendable').addEvent('event', rekenen1);

where event is a valid JavaScript event e.g. 'click', 'change', 'keyup', . . .

But in fact these line don't do anything here so you might as well delete all of them.

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

Come to think about it; as you have all the values before the form loads you could do the total in PHP anyhow.

Bob

Hell yeah, that worked! Thank you so much🙂

Just out of curiosity... How hard is it to setup the input to have the comma on thousands so if I type 1200 it shows as 1,200.

Hi Manofstyle,

You can do it with a little JavaScript snippet to reformat the input. That part is easy, you then have to make sure that you manage the validation and the resulting saved data to handle the comma correctly.

There's a snippet here that I wrote to change the , to a . - you can probably modify that the work the other way around.

Bob