# Calculations

There isn’t anything built in to the Quform plugin to do calculations on the selected form values and show results, but it can be done with custom JavaScript code. This guide will show you how to show the results of a calculation to the user and set the value of a Hidden field so that the same total is submitted with the form data for the admin to see.

Note: if you do not understand the JavaScript code in Step 3 you may need a JavaScript developer to build this for you. We are not available for hire for custom work.

## Step 1

Create the form if you haven’t done so already and add a Hidden field to the form to store the result of the calculation.

## Step 2

Add an HTML element to the form at the point in the where you want the result of the calculation to appear, and enter the following code as the content.

 ```1 ``` `
`
`<div id="form-total"></div>`

## Step 3

Go to Forms → Settings → Custom CSS & JS and at the Custom JavaScript field enter the following code.

 ```1 2 3 4 5 67 8 9 10 11 12 13 14 15 1617 18 19 20 21 22 23 24 25 26 2728 29 30 31 3233 34 35 36 3738 39 40 41 42 43 44 45 46 4748 49 50 51 52 53 54 55 5657 58 59 60 61 62 6364 65 6667 68 6970 ``` ```jQuery(function (\$) {     var calculate = function () {         var total = 0;           // Check the selected option of a select menu         var val1 = \$('.quform-field-1_3').val();        if (val1 == 'Option 1') {             total += 15;         } else if (val1 == 'Option 2') {             total += 20;         } else if (val1 == 'Option 3') {             total += 25;         }           // Check the selected options of a multi select menu         var val2 = \$('.quform-field-1_4').val();        if (val2) {             if (\$.inArray('Option 1', val2) > -1) {                 total += 40;             }             if (\$.inArray('Option 2', val2) > -1) {                 total += 80;             }         }           // Check if a checkbox is ticked         if (\$('.quform-field-1_5_1').is(':checked')) {            total += 5;         }           // A second checkbox         if (\$('.quform-field-1_6_1').is(':checked')) {            total += 105;         }           // A radio button         var val3 = \$('.quform-field-1_7:checked').val();        if (val3 == 'Option 1') {             total += 100;         } else if (val3 == 'Option 2') {             total += 200;         } else if (val3 == 'Option 3') {             total += 250;         }           // A text input field with numeric value         var val4 = \$('.quform-field-1_8').val();        if (val4 && val4.length && \$.isNumeric(val4)) {             total += parseFloat(val4);         }           // Display the result to the user         \$('#form-total').text('Total: \$' + total);           // Set the value of the hidden field         \$('.quform-field-1_9').val('\$' + total);    };       // Calculate on page load     calculate();       // Recalculate when these select menus are changed     \$('.quform-field-1_3, .quform-field-1_4').change(calculate);      // Recalculate when these checkboxes/radio buttons are clicked     \$('.quform-field-1_5, .quform-field-1_6, .quform-field-1_7').click(calculate);      // Recalculate when these text input fields are changed     \$('.quform-field-1_8').on('keyup blur', calculate);});```
```jQuery(function (\$) {
var calculate = function () {
var total = 0;

// Check the selected option of a select menu
var val1 = \$('.quform-field-1_3').val();
if (val1 == 'Option 1') {
total += 15;
} else if (val1 == 'Option 2') {
total += 20;
} else if (val1 == 'Option 3') {
total += 25;
}

// Check the selected options of a multi select menu
var val2 = \$('.quform-field-1_4').val();
if (val2) {
if (\$.inArray('Option 1', val2) > -1) {
total += 40;
}
if (\$.inArray('Option 2', val2) > -1) {
total += 80;
}
}

// Check if a checkbox is ticked
if (\$('.quform-field-1_5_1').is(':checked')) {
total += 5;
}

// A second checkbox
if (\$('.quform-field-1_6_1').is(':checked')) {
total += 105;
}

// A radio button
var val3 = \$('.quform-field-1_7:checked').val();
if (val3 == 'Option 1') {
total += 100;
} else if (val3 == 'Option 2') {
total += 200;
} else if (val3 == 'Option 3') {
total += 250;
}

// A text input field with numeric value
var val4 = \$('.quform-field-1_8').val();
if (val4 && val4.length && \$.isNumeric(val4)) {
total += parseFloat(val4);
}

// Display the result to the user
\$('#form-total').text('Total: \$' + total);

// Set the value of the hidden field
\$('.quform-field-1_9').val('\$' + total);
};

// Calculate on page load
calculate();

// Recalculate when these select menus are changed
\$('.quform-field-1_3, .quform-field-1_4').change(calculate);

// Recalculate when these checkboxes/radio buttons are clicked
\$('.quform-field-1_5, .quform-field-1_6, .quform-field-1_7').click(calculate);

// Recalculate when these text input fields are changed
\$('.quform-field-1_8').on('keyup blur', calculate);
});```

The code will need to be modified to suit your own calculation and element IDs. See below for a description of how to change the code.

• On line 6, change `1_3` to a Select Menu element unique ID, and below that change the option values and prices to suit
• On line 16, change `1_4` to a Multi Select element unique ID, and below that change the option values and prices to suit
• On line 27, change `1_5_1` to a Checkbox option unique ID
• On line 32, change `1_6_1` to a Checkbox option unique ID
• On line 37, change `1_7` to a Radio Button element unique ID, and below that change the option values and prices to suit
• On line 47, change `1_8` to a Text element unique ID
• On line 56, change `1_9` the Hidden field unique ID from Step 1
• On line 63, change `1_3` and `1_4` to the unique ID of any Select Menu and Multi Select element that will affect the calculation, add more selectors by separating them by a comma
• On line 66, change `1_5`, `1_6` and `1_7` to the unique ID of any Checkboxes and Radio Button elements which will affect the calculation, add more selectors by separating them by a comma
• On line 69, change `1_8` to the unique ID of a Text element which will affect the calculation, add more selectors by separating them by a comma