Live Update of Form Calculations

The JavaScript Source Code

Here is the JavaScript source code for the order form example. Customization notes follow.

The JavaScript can go anywhere on your page or imported from an external file.

<script>
/*
   Basic Form Field Addition and Multiplication Functions
   Version 1.0
   August 29, 2016

   See article at willmaster.com for instructions.

   Copyright 2016 Will Bontrager Software LLC
   https://www.willmaster.com/

   This software is provided "AS IS," without any warranty of any kind, without even 
   any implied warranty such as merchantability or fitness for a particular purpose. 
   Use of this software is subject to the Website's Secret Software License Agreement.
   https://www.willmaster.com/software/WebSitesSecret/WS_LicenseAgreement.html
*/

function AddListOfFieldValues()
{
   var DecimalPosition = 0;
   var FieldDestinationID = "numfield";
   var OtherTagDestinationID = "numtag";
   var AdditionListFieldIDs = new Array( "num1", "num2", "num3", "num4", "num5" );
   var total = new Number(0.0);
   for( var i=0; i<AdditionListFieldIDs.length; i++ )
   {
      var v;
      if( ( v = document.getElementById(AdditionListFieldIDs[i]).value.replace(/[^\-\.\d]/g,"") ) )
      {
         total += parseFloat(v);
      }
   }
   total = total.toFixed(DecimalPosition);
   if( FieldDestinationID.length ) { document.getElementById(FieldDestinationID).value = total; }
   if( OtherTagDestinationID.length ) { document.getElementById(OtherTagDestinationID).innerHTML = total; }
} // function AddListOfFieldValues()

function TotalFieldValuesMultiplied()
{
   var DecimalPosition = 2;
   var FieldDestinationID = "pricefield";
   var OtherTagDestinationID = "pricetag";
   var AddAndMultiplyList = new Object();
   AddAndMultiplyList["num1"] = "price1";
   AddAndMultiplyList["num2"] = "price2";
   AddAndMultiplyList["num3"] = "price3";
   AddAndMultiplyList["num4"] = "price4";
   AddAndMultiplyList["num5"] = "price5";
   var total = new Number(0.0);
   for( var numfield in AddAndMultiplyList )
   {
      var v1, v2;
      if( ( v1 = document.getElementById(numfield).value.replace(/[^\-\.\d]/g,"") ) )
      {
         if( ( v2 = document.getElementById(AddAndMultiplyList[numfield]).value.replace(/[^\-\.\d]/g,"") ) )
         {
            total += parseFloat( parseFloat(v1) * parseFloat(v2) );
         }
      }
   }
   total = total.toFixed(DecimalPosition);
   if( FieldDestinationID.length ) { document.getElementById(FieldDestinationID).value = total; }
   if( OtherTagDestinationID.length ) { document.getElementById(OtherTagDestinationID).innerHTML = total; }
} // function TotalFieldValuesMultiplied()
</script>

JavaScript Customization Notes

All text colors in these customization notes for the JavaScript source code are duplicated in the example order form HTML source code where applicable for easier correlation.

Customization for the two JavaScript functions is similar. But there are enough differences that each will be described separately.

Customization of the AddListOfFieldValues() function —

There are 4 places to customize. The customization area has a pale highlighted background.

1. var DecimalPosition = 0;

   This specifies the number of decimal positions for the calculated result. The value 0 means only whole numbers. Any decimal position may be specified.

2. var FieldDestinationID = "numfield";

   If you have a form field where the calculated result is to be inserted, specify the form field's ID value here. If the total is not to be inserted into a form field, specify a value of null (like FieldDestinationID = "";).

   In the order form example, the form field where the calculated result is to be inserted is in the bottom form, under the "How Many" column.

3. var OtherTagDestinationID = "numtag";

   If you have a span or div tag where the calculated result is to be inserted, specify the tag's ID value here. If the total is not to be inserted into an HTML tag, specify a value of null (like OtherTagDestinationID = "";).

   In the order form example, the span tag where the calculated result is to be inserted is in the paragraph between the top order form and the bottom totals form.

4. Because the line referenced here is longer than the width of this content column, it's put into a pre tag. Scroll as needed to view the entire line.

   var AdditionListFieldIDs = new Array( "num1", "num2", "num3", "num4", "num5" );
   

   The id values between quotes are the id values of the order form fields where people type in how many they want of that item. You'll see the id values in the order form source code, also colored blue.

   The list of id values you provide here are the fields the JavaScript function consults when it adds up the total items.

When those 4 customizations are done, the function is ready to use.

Customization of the TotalFieldValuesMultiplied() function —

There are 4 places to customize. The customization area has a pale highlighted background.

1. var DecimalPosition = 2;

   This specifies the number of decimal positions for the calculated result. The value 2 means format the result with two decimal places, like currency. Any decimal position may be specified.

2. var FieldDestinationID = "pricefield";

   If you have a form field where the calculated result is to be inserted, specify the form field's ID value here. If the total is not to be inserted into a form field, specify a value of null (like FieldDestinationID = "";).

   In the order form example, the form field where the calculated result is to be inserted is in the bottom form, under the "Price (USD)" column.

3. var OtherTagDestinationID = "pricetag";

   If you have a span or div tag where the calculated result is to be inserted, specify the tag's ID value here. If the total is not to be inserted into an HTML tag, specify a value of null (like OtherTagDestinationID = "";).

   In the order form example, the span tag where the calculated result is to be inserted is in the paragraph between the top order form and the bottom totals form.

4. var AddAndMultiplyList = new Object(); AddAndMultiplyList["num1"] = "price1"; AddAndMultiplyList["num2"] = "price2"; AddAndMultiplyList["num3"] = "price3"; AddAndMultiplyList["num4"] = "price4"; AddAndMultiplyList["num5"] = "price5";

   The first line above, the one beginning with the var code, needs to be as it is. It initializes an array. The lines following the first line assign values to the array.

   In each line that assigns values to the array, the two quoted id values are the id values of corresponding form field id values in the order form:

   1. The first quoted id value, the one between the square parentheses, is an id value of a text field in the order form where people type in how many they want of that item. You'll see the id values in the order form source code, also colored blue.

   2. The second quoted id value, the one immediately before the semi-colon character at the end of the line, is an id value of a hidden field in the order form that specifies the price for the order form item. You'll see the id values in the order form source code, also colored blue.

   Your implementation may have more or less than 5 lines for assigning values to the array.

   The function takes the id values of each line and multiplies the values in their corresponding form fields. The result of each line's addition is added together to get the total price for the order.

When those 4 customizations are done, the function is ready to use.

Once the functions are ready, they can be pasted into the web page source code. As noted earlier, the JavaScript can be anywhere on the page or imported from an external file.

Testing

Testing consists of typing a number in each quantity field to verify the results are correct. Test once with each quantity field being the only one with a number in it. And test with several quantity fields having a number.

When that passes, your form or calculator, whatever you want to call it, is ready for use.

Depending on how you designed it, the total quantity, the total price, or both will automatically update as people use it.

(This article first appeared in Possibilities ezine.)

Will Bontrager