VirtualMV/JavaScript/Case Study: Forms/Calculations/Content

Performing calculations on an HTML Page using JavaScript
Right, lets look at how to do some calculations. In the HTML file I have the following fields that will hold totals.

Some tricky code here
 * disabled="disabled" means that the input box is not able to be edited by the user
 * style="text-align:right" means that the numbers will be right aligned (which makes more sense for numbers)
 * Note I use txt for the input variables as ALL form variables are txt (even if they are entered as numbers).

Then when the function fnCheckData is run, the following code will be called

So I am going to create variables vntDVD, vntBluRay and vntItems (vnt stands for variant which means it can be either text or a number so use with care).
 * Where
 * vntDVD will be the total for DVDs
 * vntBluRay will be the total for BluRays and
 * vntItems will be the sum of vntDVD and vntBluRay (add them together!!)
 * toFixed(2) means show the number to two decimal places

Ok, before you go hog wild and create the table, test that your code actually works. So, for now add some fixed variables into the code. To make it easier to keep the calculation code separate from the overall structure, I am going to bundle the code into a separate function and call this when fnCheckData is called. So first create fnComputeTotals before fnCheckData

Then add fnComputeTotals to fnCheckData:

Test the code in your Web Browser to see if its all working. Just a hint, if things aren't working try commenting out the code until it works.

At this stage it's probably time to create an Archive Version.