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.
|
|
| 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 | |
| Check |
|
What the JavaScript function does:
Create a ‘calculated value’.
Calculated value for paint quantity |
|
| Label | Required paint quantity |
| Technical name | paintquantity |
| JavaScript | |
| Check |
|
What the JavaScript function does:
Create a ‘calculated value’.
Calculated value for total cost |
|
| Label | Total cost |
| Technical name | totalcost |
| JavaScript | |
| Check |
|
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.
