# JS: Perform a calculation on values entered in a WebForm

## Recommended Posts

JavaScript Solution: Perform a calculation on values entered in a Submission Form

Feature Description:
This JavaScript solution shows how to perform a mathematical calculation such as multiplication in a Submission Form DataPage.
Values entered in the form are multiplied and the result is stored in a field on the same form.
This calculation is performed when the DataPage is submitted by the user.

For example, if the values 15 and 2 are input into two fields named Height and Width respectively, the value 30 is automatically inserted into a field named Area.

Implementation:
This solution can be used "as-is", without any changes if
a. It is used in an Submission Form and
b. The fields Height, Width and Area exist in the table and the form.

To use this solution copy and paste the code below, inside the HTML Footer section of the Submission Form using the Caspio Bridge DataPage Wizard.

```<SCRIPT LANGUAGE="JavaScript">

function calculate()
{
/* Retrieve the value of the field Height and store in a variable 'v_height' */
var v_height = parseFloat(document.getElementById("InsertRecordHeight").value);

/* Retrieve the value of the field Width and store in a variable 'v_width' */
var v_width = parseFloat(document.getElementById("InsertRecordWidth").value);

/* Multiply the value height and width to obtain the value of 'v_area' */
var v_area= (v_height * v_width);

/* Insert a rounded value of the variable 'v_height' into the DataPage field Area */
document.getElementById("InsertRecordArea").value = Math.round(v_area);
}

/* On submitting the webform, the function calculate is executed */
document.getElementById("caspioform").onsubmit=calculate;

</SCRIPT>
```

Here is another example using Price and Quantity to calculate and store the Total:

```<SCRIPT LANGUAGE="JavaScript">

function calculate()
{
var v_price = parseFloat(document.getElementById("InsertRecordPrice").value);
var v_quantity  = parseFloat(document.getElementById("InsertRecordQuantity").value);
var v_total  = (v_price * v_quantity);
document.getElementById("InsertRecordTotal").value = Math.round(v_total);
}

/* On submitting the webform, the function calculate is executed */
document.getElementById("caspioform").onsubmit=calculate;

</SCRIPT>
```

• This solution is best used to perform simple calculations with small numbers.
• The field that stores the result of the calculation may have validation rules placed upon it which may prevent this solution from working correctly.
• To customize this script to be used on an Update Form or a Details page of a Search and Report DataPage, replace the prefix "InsertRecord" with "EditRecord" in the code.

Tested Browsers
This JavaScript solution was tested on the following platforms and Internet Browsers only.
# MS Windows - IE 8.0, Firefox 3.5.7, Chrome 3.0.195.38, Safari 4.0.3
# Macintosh - Firefox 3.5.7, Safari 4.0.3

Disclaimer: Use these JavaScript solutions at your own risk! They are provided to assist you in the customization of your programs and while we believe they work properly, by using them you accept all responsibility about them and confirm that they are not a feature of Caspio's platforms and as such are provided "as is" without any warranties, support or guarantees.