DFFS sum multiple fields in a totals field

Forums Dynamic Forms for SharePoint DFFS sum multiple fields in a totals field

Viewing 10 reply threads
  • Author
    Posts
    • #11033
      Alexander Bautz
      Keymaster

      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 1 year ago by Alexander Bautz. Reason: Changed from "change" to "keyup" on the event triggering the function setFinalCost
    • #11058
      Zaruba.Ivan
      Participant

      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

    • #11064
      Alexander Bautz
      Keymaster

      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

    • #11080
      Zaruba.Ivan
      Participant

      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 4 years, 1 month ago by Zaruba.Ivan.
      • This reply was modified 4 years, 1 month ago by Zaruba.Ivan.
    • #11120
      Alexander Bautz
      Keymaster

      I’m glad you figured it out.

      Alexander

    • #25202
      Maciek Grischke
      Participant

      Hi guys,

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

    • #25219
      Alexander Bautz
      Keymaster

      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

    • #25228
      Maciek Grischke
      Participant

      Thanks! This worked great as usual 🙂

    • #25324
      Maciek Grischke
      Participant

      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.

    • #25333
      Alexander Bautz
      Keymaster

      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

    • #25501
      Maciek Grischke
      Participant

      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
      
      • #25512
        Alexander Bautz
        Keymaster

        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

      • #25654
        Maciek Grischke
        Participant

        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.

Viewing 10 reply threads
  • You must be logged in to reply to this topic.