Last updated:
This article shows you how you can use JavaScript in combination with the ‘calculated value’ form element. This article uses a calculator for pricing paint to explain how you can calculate the amount of paint needed and the total cost, based on the area to be painted and the specific paint chosen. You will also learn the best ways to link various form values together and automate calculations.
The cost calculator will be created on a new and empty form page that will only be used for this specific purpose. Follow the steps as given below:
The room dimensions are needed for calculating the wall area to be painted.
Create three input fields for the length, width and height of the room. Take care to ensure that the technical names are specified correctly, because these will be needed for the calculations.
Input field for length |
|
| Label | Room length in metres |
| Technical name | roomlength |
| Validation | Number (smallest value: 0) |
Input field for width |
|
| Label | Room width in metres |
| Technical name | roomwidth |
| Validation | Number (smallest value: 0) |
Input field for height |
|
| Label | Room height in metres |
| Technical name | roomheight |
| Validation | Number (smallest value: 0) |
To ensure that windows and doors can be deducted from the overall area, these need to be specified in the form.
Input field for area to deduct |
|
| Label | Area to deduct in square metres |
| Technical name | areatodeduct |
| Validation | Number (smallest value: 0) |
You can let your users choose from different qualities of paint.
Create a single choice field with various paint qualities.
Single choice field for paint quality |
|
| Label | Required paint quality |
| Technical name | paint |
| Options |
|
You can now automate the calculations with JavaScript.
Create a ‘calculated value’.
Calculated value for wall area |
|
| Label | Wall area to be painted |
| Technischer Name | wallarea |
| JavaScript | See the following code block. |
| Check |
|
function calculate() {if (roomlength && roomwidth && roomheight && areatodeduct) {
// Total wall area: (length + width) * 2 * height
const basearea = (parseInt(roomlength) + parseInt(roomwidth)) * 2 * parseInt(roomheight);
// Deduct windows and doors
return basearea - parseInt(areatodeduct) + ' m²';
} else return '';};
What the JavaScript function does |
|
Create a ‘calculated value’.
Calculated value for paint quantity |
|
| Label | Required paint quantity |
| Technical name | paintquantity |
| JavaScript | See the following code block. |
| Check |
|
function calculate() {if (wallarea) {
// About 0.125 litres of paint are needed per m²
return Math.ceil(parseInt(wallarea) * 0.125)+ ' litres';
} else return '';};
What the JavaScript function does |
|
Create a ‘calculated value’.
Calculated value for total cost |
|
| Label | Total cost |
| Technical name | totalcost |
| JavaScript | See the following code block. |
| Check |
|
function calculate() {if (!isEmptyList(paint) && paintquantity) {
// Multiply paint quantity with price per litre
return 'EUR ' + parseInt(paintquantity) * parseInt(paint[0]);
} else return '';};
What the JavaScript function does |
| The JavaScript function multiplies the calculated paint quantity with the litre price for the selected paint. |
Your paint calculator is now ready to use and offers the following functions:
Test the calculator with various input values to confirm that all calculations are carried out correctly.
This Paint Calculator is also available as a template from our website. The template can be found under Self Service .
The template has been designed only to perform a calculation – such as for a product on your website. The submit button is therefore hidden, because the form does not need to be submitted.
