DFFS sum multiple fields in a totals field

[Alexander Bautz]

I got this request from Josh:

Hi Alexander,

I was wondering if there was a way to perform a calculation on the fly on a DFFS form.
So if I fill out 2 number fields that it will add those together and put the value into another “Total” field. So as someone is filling out the form it can add up the numbers they input as they input the numbers.

Hope that makes sense.
Thanks!

Here is an example of three columns: NumField1, NumField2 and NumField3 that are summed up in a column “Tot”.

First add the columns to the form, then add this code to the Custom CSS:

input.fieldValueUpdated{
	background-color:green;
	color:#ffffff;
}

Then add this to the Custom JS:

jQuery("#dffs_NumField1 input, #dffs_NumField2 input").on("keyup",function(){
    var str = jQuery(this).val().replace( /[^0-9.]/g, "" );
    jQuery(this).val(str);
    setFinalCost();
});

function setFinalCost(){
	var a, b, c, aa, bb, cc;
	a = Number($("#dffs_NumField1 input").val());
	b = Number($("#dffs_NumField2 input").val());
	c = Number($("#dffs_NumField3 input").val());
	aa = !isNaN(a) ? a : 0;
	bb = !isNaN(b) ? b : 0;
	cc = !isNaN(c) ? c : 0;
	if(isNaN(a)){
		alert("Number format error in \""+spjs.dffs.fieldData.NumField1.disp+"\"");
	}
	if(isNaN(b)){
		alert("Number format error in \""+spjs.dffs.fieldData.NumField2.disp+"\"");
	}
	if(isNaN(c)){
		alert("Number format error in \""+spjs.dffs.fieldData.NumField3.disp+"\"");
	}
	$("#dffs_Tot input").addClass("fieldValueUpdated").val(aa+bb+cc);
	setTimeout(function(){
		$("input.fieldValueUpdated").removeClass("fieldValueUpdated");
	},1000);
}

Please note that you must ensure the field names are correct.

I could have minimized the code by adding the fields to an array, looping over then to avoid repeating the code three times, but the readability is better like this.

Alexander

• This topic was modified 5 years, 5 months ago by Alexander Bautz. Reason: Changed from "change" to "keyup" on the event triggering the function setFinalCost

[Zaruba.Ivan]

Hi Alexander,

excellent code. Thank You. It helped me a lot. How can I avoid error alert in EditForm, when it reloads original values with thousands separator?

Ivan Zaruba

[Alexander Bautz]

Hi,
You must change the lins that look up the value – like this example:

a = Number($("#dffs_NumField1 input").val());

like this (assuming the thousands separator is a comma):

a = Number($("#dffs_NumField1 input").val().split(",").join(""));

Alexander

[Zaruba.Ivan]

Hi Alexander,
thank You, but there is a still NaN error.
It works when I replaced lines that look up the value – like this:

a = Number(parseFloat($("#dffs_NumField1 input").val().replace(/\s/g, "").replace(",", ".")));
b = Number(parseFloat($("#dffs_NumField2 input").val().replace(/\s/g, "").replace(",", ".")));
c = Number(parseFloat($("#dffs_NumField3 input").val().replace(/\s/g, "").replace(",", ".")));

Ivan

• This reply was modified 8 years, 7 months ago by Zaruba.Ivan.
• This reply was modified 8 years, 7 months ago by Zaruba.Ivan.

[Alexander Bautz]

I’m glad you figured it out.

Alexander

[Maciek Grischke]

Hi guys,

is it possible to make the Total field read-only?

[Alexander Bautz]

You should be able to set it readyonly in a rule and then change this line of code:

$("#dffs_Tot input").addClass("fieldValueUpdated").val(aa+bb+cc);

to this:

setFieldValue("Tot",aa+bb+cc);

The setFieldValue function should update a readonly field value when it is changed.

Alternatively hide the Tot field entirely and use a HTML section with this format to automatically update it when changing the value with setFieldValue:

{{Tot}}

Alexander

[Maciek Grischke]

Thanks! This worked great as usual 🙂

[Maciek Grischke]

Hi again,

I just noticed that the calculation does not work in Edge. Whether it’s read only or editable.

Any idea why and do you think it’s fixable?

It works fine in Forefox, Chrome, IE and even Opera, but not Edge and we know Edge is now being forced on users so I’m worried I will be getting complaints at some point.

[Alexander Bautz]

Hi,
I’m not aware of any incompatibility with Edge can you try adding some alerts or console.log statements to your code to try to pinpoint where it fails?

PS: If you are able to recreate it in the testsite I have access to I’ll take a look there.

Alexander

[Maciek Grischke]

Hi Alexander,

I replicated the issue in my test site. I added the log to the code, but the log (or the code) is not triggering until I delete one of the numbers with an X icon. X icon at the end of the field. Deleting the number with a backspace or delete keys is not doing anything. Weird.
The X icon seems to be only available in Edge, I don’t see it in any other browser.

Also, the calculation only works when I click away from the number field, not on “keyup” – this applies to all browsers, but that’s not an issue.

Please note, the “Total” field is a text field, but I just changed it to a number field and the same behaviour occurs.

The list in my test site is called CalcTest

/CalcTest/AllItems.aspx

• This reply was modified 5 years, 5 months ago by Maciek Grischke.
• This reply was modified 5 years, 5 months ago by Maciek Grischke.
• This reply was modified 5 years, 5 months ago by Maciek Grischke.

[Alexander Bautz]

Hi,
I looked at your test list and modified the code to use “keyup” instead of “change” – not sure why Edge doesn’t trigger a change event when the input is changed though.

PS: You have some errors in another part of the code – look at the console when loading the form in Chrome and you find a few red messages.

Alexander

[Maciek Grischke]

Thanks for this, it works great in all browsers.

In relation to those red messages, I think they’re not related to the form itself. I think it relates to some broken scriptlinks or other JS files I previously used on that test site.

[Author]

Posts