Multiple calculations using javascript

[mikeg]

I have a details page I need to make calculations for multiple fields to do estimating. I am entering values in fields and need to create a cost on the form. I was successful in creating some of the calculations but after the 4th calculation is made, the rest of the fields to be calculated display NaN. Here is the script and attached is a screen shot of the results....

 

<button style="background:red" onclick="calculate()">Calculate</button>

<SCRIPT LANGUAGE="JavaScript">

function calculate()
{

var a = [@field:Area1_Sq_Ft]
document.getElementById("EditRecordArea1_Sq_Ft_Cost").value = a*7;

var b = [@field:Area1_Vertical]
document.getElementById("EditRecordArea1_Vertical_Cost").value = b*7;

var c = [@field:Area1_Steps]
document.getElementById("EditRecordArea1_Steps_Cost").value = c*7;

var d = [@field:Area1_Cracks]
document.getElementById("EditRecordArea1_Cracks_Cost").value = d*7;

var e = [@field:Area1_Pitting]
document.getElementById("EditRecordArea1_Pitting_Cost").value = e*7;

var f = [@field:Area1_Removal]
document.getElementById("EditRecordArea1_Removal_Cost").value = f*40;

var g = [@field:Area2_Sq_Ft]
document.getElementById("EditRecordArea2_Sq_Ft_Cost").value = g*7;

var h = [@field:Area2_Vertical]
document.getElementById("EditRecordArea2_Vertical_Cost").value = h*7;

var i = [@field:Area2_Steps]
document.getElementById("EditRecordArea2_Steps_Cost").value = i*7;

var j = [@field:Area2_Cracks]
document.getElementById("EditRecordArea2_Cracks_Cost").value = j*7;

var k = [@field:Area2_Pitting]
document.getElementById("EditRecordArea2_Pitting_Cost").value = k*7;

var l = [@field:Area2_Removal]
document.getElementById("EditRecordArea2_Removal_Cost").value = l*40;

}

</SCRIPT>

[mikeg]

I realized the calculations do not work until the form has been submitted then opened again with values loaded. Is there a way to have the values calculate when fields were blank on load if you populate while page is open?

 

[mikeg]

Also, I need to add these amounts to get a subtotal for each area example....

 

document.getElementById("EditRecordArea1_Subtotal_Cost").value = IsNull([@field:Area1_Sq_Ft_Cost],0)+ IsNull([@field:Area1_Vertical_Cost],0)+ IsNull([@field:Area1_Steps_Cost],0)+ IsNull([@field:Area1_Cracks_Cost],0)+ IsNull([@field:Area1_Pitting_Cost],0)+ IsNull([@field:Area1_Removal_Cost],0)

 

 

This part does not work though.

 

Any help would be appreciated.

 

[Vitalikssssss]

On 4/1/2017 at 0:52 AM, mikeg said:

I realized the calculations do not work until the form has been submitted then opened again with values loaded. Is there a way to have the values calculate when fields were blank on load if you populate while page is open?

 

1

Hi mikeg,

I assume that you are using "Single record update" form in your case and you have initial values already stored in a table, am I correct?

If so it seems like field value marked as "NaN" does not have any value stored. 

Please describe how do you retrieve the values such as  [@field:Area1_Sq_Ft] ?

Quote

document.getElementById("EditRecordArea1_Subtotal_Cost").value = IsNull([@field:Area1_Sq_Ft_Cost],0)+ IsNull([@field:Area1_Vertical_Cost],0)+ IsNull([@field:Area1_Steps_Cost],0)+ IsNull([@field:Area1_Cracks_Cost],0)+ IsNull([@field:Area1_Pitting_Cost],0)+ IsNull([@field:Area1_Removal_Cost],0)

 

This code will not work since you have not defined IsNull function between <Script> tags however, it will work in Caspio Calculated/Formula fields since this type of fields has isNull function defined.

 

 

[mikeg]

Hi Vitalikssssss

 

Thanks for your reply. I realized the fields were set to text which is why I was getting NaN which I was able to resolve.

 

The next issue is to create an estimate, I need to be able to enter the numbers on the field, then call the calculate function to give the values as they are not yet stored. Currently, I need to enter the values, submit the form, then reopen the form so the values load then the calculate function works. 

 

[Vitalikssssss]

19 hours ago, mikeg said:

Hi Vitalikssssss

 

Thanks for your reply. I realized the fields were set to text which is why I was getting NaN which I was able to resolve.

 

The next issue is to create an estimate, I need to be able to enter the numbers on the field, then call the calculate function to give the values as they are not yet stored. Currently, I need to enter the values, submit the form, then reopen the form so the values load then the calculate function works. 

 

 

 

 

Hi mikeg,

Your syntax to store a value in the variable is incorrect.

Quote

var a = [@field:Area1_Sq_Ft]

You should reference Field value by id to assign the value to a variable:

var a = parseFloat(document.getElementById("EditRecordArea1_Sq_Ft").value);

Check this post for more information js-perform-a-calculation-on-values-entered-in-a-webform

 

 

 

 

[mikeg]

Hi Vitalikssssss

 

Thank you that corrected the calculations. Next would you please tell me the correct syntax to get the subtotals for the areas based on the last 3 lines in the following?....

<SCRIPT LANGUAGE="JavaScript">

function calculate()
{
var a = parseFloat(document.getElementById("EditRecordArea1_Sq_Ft").value);
document.getElementById("EditRecordArea1_Sq_Ft_Cost").value = a*7;

var b = parseFloat(document.getElementById("EditRecordArea1_Vertical").value);
document.getElementById("EditRecordArea1_Vertical_Cost").value = b*7;

var c = parseFloat(document.getElementById("EditRecordArea1_Steps").value);
document.getElementById("EditRecordArea1_Steps_Cost").value = c*7;

var d = parseFloat(document.getElementById("EditRecordArea1_Cracks").value);
document.getElementById("EditRecordArea1_Cracks_Cost").value = d*7;

var e = parseFloat(document.getElementById("EditRecordArea1_Pitting").value);
document.getElementById("EditRecordArea1_Pitting_Cost").value = e*7;

var f = parseFloat(document.getElementById("EditRecordArea1_Removal").value);
document.getElementById("EditRecordArea1_Removal_Cost").value = f*40;

var g = parseFloat(document.getElementById("EditRecordArea2_Sq_Ft").value);
document.getElementById("EditRecordArea2_Sq_Ft_Cost").value = g*7;

var h = parseFloat(document.getElementById("EditRecordArea2_Vertical").value);
document.getElementById("EditRecordArea2_Vertical_Cost").value = h*7;

var i = parseFloat(document.getElementById("EditRecordArea2_Steps").value);
document.getElementById("EditRecordArea2_Steps_Cost").value = i*7;

var j = parseFloat(document.getElementById("EditRecordArea2_Cracks").value);
document.getElementById("EditRecordArea2_Cracks_Cost").value = j*7;

var k = parseFloat(document.getElementById("EditRecordArea2_Pitting").value);
document.getElementById("EditRecordArea2_Pitting_Cost").value = k*7;

var l = parseFloat(document.getElementById("EditRecordArea2_Removal").value);
document.getElementById("EditRecordArea2_Removal_Cost").value = l*40;
 
document.getElementById("EditRecordArea1_Subtotal").value = Needs to be the sum of a*7 + b*7 + c*7 + d*7 + e*7 + f*40???;

document.getElementById("EditRecordArea2_Subtotal").value = Needs to be the sum of g*7 + h*7 + i*7 + j*7 + h*7 + l*40 ???;

document.getElementById("EditRecordJob_Subtotal").value = Needs to be the sum of a*7 + b*7 + c*7 + d*7 + e*7 + f*40 +g*7 + h*7 + i*7 + j*7 + h*7 + l*40???;

}

</SCRIPT>

 

[mikeg]

Never mind I just figured out this solution....

 

document.getElementById("EditRecordArea1_Subtotal_Cost").value = (a*7) + (b*7) + (c*7) + (d*7) + (e*7) + (f*40);

document.getElementById("EditRecordArea2_Subtotal_Cost").value = (g*7) + (h*7) + (i*7) + (j*7) + (k*7) + (l*40);

document.getElementById("EditRecordJob_Subtotal").value = (a*7) + (b*7) + (c*7) + (d*7) + (e*7) + (f*40) + (g*7) + (h*7) + (i*7) + (j*7) + (k*7) + (l*40);

 

Thank You!

[Kurumi]

Just an update. You can now use the Calculated Value in Update Forms and Details Page. You can see it here: https://howto.caspio.com/release-notes/caspio-bridge-17-0/

This allows you to generate calculations which you can use so you won't be needing JS. 

I hope it helps!

[TaxGuy]

I am building at tax application which, as would be expected, has several complex formulas. I have pushed as much as I can back into the table but the inability to use a table calculated field in a subsequent table field means the heaviest formulas, all based on Case selections need to be performed on the data page. My load time averages a little over 2 minutes, which is unacceptable. If I put the calculations in an HTML block and do the calculations there, does that speed things up?

[kpcollier]

@TaxGuy I've got a page with 30+ calculations and it is also insanely slow. Every time I ask support, they tell me to make it into a multi-step form, which is unacceptable for my workflow. I too am looking for a solution for better speeds. I haven't tried doing calculations into html blocks simply because that is a ton of work with the amount of calcs I have lol. I will eventually try it out when I get time. If you find a solution, please let me know!

[TaxGuy]

Putting the calculations in JS is much faster. My page took 2 minutes to load; it is down to about a second. There is a limit to 10,000 characters in one HTML block so I'm working on splitting it out.

[kpcollier]

This is good to know. Thanks, @TaxGuy.