Forums

I set up a Repeater area with fields, add and remove buttons for entering checks for close-out procedures, and wrote a quick php custom code to parse that before sending it to the email template. There is one thing lacking, however - while I can pass each check and amount to it's own line, I'd like to also dynamically populate a field with the totals as each check is added, or removed. The name field of the form is:
​
checklista[{var:area_repeater54.key}][checkamount]
​
and the field ID is set to:
​
amounta
​
When I enter in 3 checks, this is the array I get. Arrays always tend to scramble my brains, so I'm not sure what to do after this to sum up the checkamount fields and pass that on to the field with the name and title of:
​
totalSuma

I have Jquery doing this for static fields that works perfectly. It uses this basic setup:

$("#cash_deposit,#checks_deposit").on("change", function(){
var w = parseFloat($("#cash_deposit").val());
var x = parseFloat($("#checks_deposit").val());
if ($.isNumeric(w)){} else { w = 0; }
if ($.isNumeric(x)){} else { x = 0; }

var z = w+x;
$("#deposit_total").val(z.toFixed(2));

if (z < 0) {
$("#deposit_total").css("color","red");
} else {
$("#deposit_total").css("color","black");
}
});

But...when fields are added and removed dynamically, that's where I get a little lost, like below with 3 test checks entered.

[checklista] => Array
        (
            [0] => Array
                (
                    [checkname] => Bob
                    [checkamount] => 2.33
                )

            [1] => Array
                (
                    [checkname] => Fred
                    [checkamount] => 5.33
                )

            [2] => Array
                (
                    [checkname] => John
                    [checkamount] => 7.33
                )

        )

This is where I'm at currently but it's still not working:
​

$("#amounta").on("change", function(){
   var arr = $("#amounta").val() || [];
   sum = 0;
   $.each(arr,function(){var z = sum+=parseFloat(this) || 0;});
   $("#totalSuma").val(z.toFixed(2));

if (z < 0) {
   $("#totalSuma").css("color","red");
   } else {
   $("#totalSuma").css("color","black");
   }
});

This could be part of my problem. I only have two fields - Name and Amount, plus a remove button set up. I put "0" in the repeater area so that one field would display by default and more would be added when the add button was clicked. But it looks like the repeater area module is doing something funky under the hood. I only see one row of fields starting off, without clicking the add button. But when I look at the source code, it looks like two fields are formed, and one has an input name that is different from the other:
​

​

<div class="field " ><label for="name_on_checka" >Name on Check</label>
<input data-events="[]" placeholder="Name on Check" name="checklista[#area_repeater54.count][checkname]" id="name_on_checka" value="" type="text" /></div><div class="field allownumericwithdecimal " ><label for="amounta" >Amount</label>
<input data-events="[]" placeholder="Amount" name="checklista[#area_repeater54.count][checkamount]" id="amounta" value="" type="text" /></div><button data-events="[]" class="ui button grey remove" type="button" name="button59" id="button59" value="" >Remove Check</button></div><div class="ui divider"></div></div><div class="ui container fluid clone-item"><div class="inline  fields" id="area_fields_60"><div class="field " ><label for="name_on_checka" >Name on Check</label>
<input data-events="[]" placeholder="Name on Check" name="checklista[0][checkname]" id="name_on_checka" value="" type="text" /></div><div class="field allownumericwithdecimal " ><label for="amounta" >Amount</label>
<input data-events="[]" placeholder="Amount" name="checklista[0][checkamount]" id="amounta" value="" type="text" /></div><button data-events="[]" class="ui button grey remove" type="button" name="button59" id="button59" value="" >Remove Check</button></div

I cannot even get this javascript to work. Has to be conflicting with those invisible fields.
​

$("#amounta").on("keyup", function(){
    alert( "You typed something!!!" );
});