# 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 sent with the form data for the admin to see. See an example of this in action here.

Note: if you do not understand the JavaScript code in Step 2 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 (from the “More” tab) and add this code at the point in the form where you want the result of the calculation to appear.

 ```1 2 3 4 5 6 7 89 10 11 12 13 14 15 16 17 1819 20 21 22 23 24 25 26 27 2829 30 31 32 3334 35 36 37 3839 40 41 42 43 44 45 46 47 4849 50 51 52 53 54 55 56 5758 59 60 61 62 63 6465 66 6768 69 7071 72 ``` ```
```
```<div id="form-total"></div>
<script>
var calculate = function () {
var total = 0.00;

// Check the chosen option of a select menu
var val1 = \$('.iphorm_1_1').val();
if (val1 == 'Option 1') {
total += 15.00;
} else if (val1 == 'Option 2') {
total += 20.00;
} else if (val1 == 'Option 3') {
total += 25.00;
}

// A second select menu
var val2 = \$('.iphorm_1_5').val();
if (val2 == 'Option 1') {
total += 100.00;
} else if (val2 == 'Option 2') {
total += 200.00;
} else if (val2 == 'Option 3') {
total += 250.00;
}

// Check if a checkbox is ticked
if (\$('.iphorm_1_2_1').is(':checked')) {
total += 5.00;
}

// A second checkbox
if (\$('.iphorm_1_4_2').is(':checked')) {
total += 105.00;
}

// A radio button
var val3 = \$('.iphorm_1_6:checked').val();
if (val3 == 'Option 1') {
total += 100.00;
} else if (val3 == 'Option 2') {
total += 200.00;
} else if (val3 == 'Option 3') {
total += 250.00;
}

// A text input field with numeric value
var val4 = \$('.iphorm_1_7').val();
if (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
\$('input[name=iphorm_1_3]').val('\$' + total);
};

// Calculate on page load
calculate();

// Recalculate when these select menus are changed
\$('.iphorm_1_1, .iphorm_1_5').change(calculate);

// Recalculate when these checkboxes/radio buttons are clicked
\$('.iphorm_1_2, .iphorm_1_4, .iphorm_1_6').click(calculate);

// Recalculate when these text input fields are changed
\$('.iphorm_1_7').blur(calculate);
});
</script>```

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 8 `iphorm_1_1` is the unique ID of a Dropdown Menu
• On line 18 `iphorm_1_5` is the unique ID of another Dropdown Menu
• On line 28 `iphorm_1_2_1` is the class name of the checkbox input, which is the unique ID (`iphorm_1_2`) followed by an underscore then the number of the option (starts from 1). Inspect the element in the browser to get the correct class name.
• On line 33 `iphorm_1_4_2` is the class name of the checkbox input, which is the unique ID (`iphorm_1_4`) followed by an underscore then the number of the option (starts from 1). Inspect the element in the browser to get the correct class name.
• On line 38 `iphorm_1_6` is the unique ID of a Multiple Choice (radio button) field
• On line 48 `iphorm_1_7` is the unique ID of a Text Input field
• On line 57 `iphorm_1_3` is the unique ID of the Hidden field
• On line 64 `.iphorm_1_1, .iphorm_1_5` is the CSS selector of the Dropdown Menus which we are listening to for change events (a dot followed by the element unique ID, separated by comma)
• On line 67 `.iphorm_1_2, .iphorm_1_4, .iphorm_1_6` is the CSS selector of the Checkboxes and Multiple Choice (radio buttons) which we are listening to for click events (a dot followed by the element unique ID, separated by comma)
• On line 70 `.iphorm_1_7` is the CSS selector of the Text Input field we are listening to for the blur event (a dot followed by the element unique ID, separated by comma)