Creating a calculation form in Chronoforms6

Learn How to Auto-Calculate Form Totals with JavaScript

Overview

This guide explains how to automatically calculate a total field in a form using JavaScript. By adding a script that triggers on changes to field1 and field2, their values are summed and displayed in the total field. It also recommends setting integer masks and default values for better functionality.

Published on Feb 4, 2018 20:36

Assuming your form has 3 fields, field 1, field 2 and field total, the fields "ids" are: field1, field2 and total respectively.

In your form designer, open "Custom" and drag a JavaScript element, open the settings and enable the "Load on dom ready", then add this code:

$("#field1,#field2").on("change", function(){
	$("#total").val(parseInt($("#field1").val()) + parseInt($("#field2").val()));
});

You may want to set an integer mask for your fields and set the default values to 0 based on your requirements.

Category: Chronoforms v6

Comments:

You need to login to be able to post a comment.