Miscalculation in form repeat

[jellederijke]

OS info

• Operating System : Windows 10.0.19044
• Wappler Version : 4.9.1

Maybe similar to this issue:

Bug Report: Calculating values of a Repeat

Wappler Version : 4.9.1 Operating System : Windows 10 Server Model: NodeJS Database Type: SQLite Hosting Type: Local Expected behavior What do you think should happen? Total sums should be calculated dynamically when the repeat items load from the database. [image] Actual behavior What actually happens? Total sums are not calculated dynamically when the repeat items load from the database. [image] I opened a backup dated 14 March 2022 and it works as intended, if ran with no proje…

Problem description

I have created a sum total for input fields in a form repeat, according to @mebeingken’s cool code here:

Access Form Repeat data

I created a function to be called to update a total amount: It gets all inputs with a specific class, and performs the calc, and then sets a value in the dmx world. function findTotal() { var arr = document.getElementsByClassName('quote_detail_amount'); var tot = 0; for (var i = 0; i < arr.length; i++) { if (parseFloat(arr[i].value)) tot += parseFloat(arr[i].value); } dmx.parse("content.quote_total_amount.setValue(" + tot + ")"); } The following is th…

This works great:

100+100 equals 200, good!

BUT for my next column total calculation something weird happens. For whatever reason it seems that the first row in the form repeat is devided by 10 and the second one isn’t. So in this example if I only have one row in the repeat form the sum of 108 is 10.8 (should be 108):

And if I add another row of 108 it should be 216 but it becomes:

So it seems to add 10.8 to 108. Not quite right!

So the code I use to make these calculations is:

<script>
    function calcTotal() {
var arrgrams = document.getElementsByClassName('amountgrams');

console.log(arrgrams);

var totgrams = 0;
for (var i = 0; i < arrgrams.length; i++) { 
        if (parseFloat(arrgrams[i].value)) 
            console.log(arrgrams[i].value);
            console.log(parseFloat(arrgrams[i].value));
            totgrams +=parseFloat(arrgrams[i].value);
            console.log(totgrams);
            } 
            dmx.parse("content.total_amount.setValue(" + totgrams + ")" );
            
            
var arrkcal = document.getElementsByClassName('kcal');

console.log(arrkcal);


var totkcal = 0;
for (var i = 0; i < arrkcal.length; i++) { 
        if (parseFloat(arrkcal[i].value)) 
            console.log(arrkcal[i].value);
            console.log(parseFloat(arrkcal[i].value));
            totkcal +=parseFloat(arrkcal[i].value);
            console.log(totkcal);
            } 
            dmx.parse("content.total_kcal.setValue(" + totkcal + ")" );            
            
             }
</script>

As you can see I added some logging to check where it goes wrong.
It only goes wrong for the kcal version, the second total.

This is the code for that actual input:

<input id="kcal" name="kcal" type="number" class="form-control form-control-sm kcal" readonly="true" dmx-bind:value="((sc_get_all_foods.data.foods.where('nevo_food_id', autocomplete1.value, '==')[0].ENERCC * amountgrams.value) / 100)">

The part where I multiply the data by amountgrams.value screws it up. If I remove that it sums up just fine. Here I have hardcoded the value 200:

<input id="kcal" name="kcal" type="number" class="form-control form-control-sm kcal" readonly="true" dmx-bind:value="(sc_get_all_foods.data.foods.where('nevo_food_id', autocomplete1.value, '==')[0].ENERCC*200/100)">

EDIT:

So I have now found out it has something to do with timing. If I enter the value for ‘amountgrams’ and not let it fire the function on update but do it manually with a button with a static event triggering the js, it works fine:

So if anyone has an idea how to not use this button but perhaps build in a wait after updating the field to trigger the function, that would be AWESOME!

[Teodor]

Sorry not quite clear to me - is the issue you are having with the custom js code you provided, or is it somewhere else?

[jellederijke]

Thanks for the swift reply, @Teodor!

So it start with my goal: I have a form repeat with some inputs. And I want to calculate totals for some of these inputs. But I couldn’t find a way to access the form repeat input data in the UI to do a sum calculation. Hence my link to @mebeingken’s post with his feature request.

So for now I opted to do this calculation with javascript instead, I wouldn’t know how to do it otherwise.

I now start to get the feeling that it has to do with sequence of things, actually. When I fire the function manually again AFTER entering the amountgrams value, it works correctly. So I think it is a timing issue on my end that I need to sort out…

Would you be able to file this as a regular post instead of bug? I can add my findings here and perhaps someone in the future can use it when trying to make a calculation within a repeat form work.

[jellederijke]

To answer my own question:

I created a page flow like so:

<script is="dmx-flow" id="flow1" type="text/dmx-flow">{
  runJS: {function: "calcTotal"}
}</script>

And added some debounce to delay the excecution of the script:

dmx-on:updated.debounce:300="flow1.run()"

Now it works perfectly!