# 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 (optional)         \$('#form-total').text('Total: \$' + total);           // Set the value of the hidden field (optional)         \$('.quform-field-1_9').val('\$' + total).triggerHandler('change');    };       // Calculate on page load     calculate();       // Recalculate when these select menus are changed     \$('.quform-field-1_3, .quform-field-1_4').on('change', calculate);      // Recalculate when these checkboxes/radio buttons are clicked     \$('.quform-field-1_5, .quform-field-1_6, .quform-field-1_7').on('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;
}

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 (optional)
\$('#form-total').text('Total: \$' + total);

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

calculate();

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

// Recalculate when these checkboxes/radio buttons are clicked
\$('.quform-field-1_5, .quform-field-1_6, .quform-field-1_7').on('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
Be inspired. © 2024 ThemeCatcher Ltd. 20-22 Wenlock Road, London, England, N1 7GU | Company No. 08120384 | Built with React | Privacy Policy