Sum of repeatable element in JS

[waby]

Hi,

In the form, how can I do in Javascript the sum of repeatable elements and display the result in another element ?

I have tried this

function sumQuantity(){
var qty0 = form_30.formElements.get('join___70___jml_fb_mp_orders_contents___unit_quantity_0').getValue();
var qty1 = form_30.formElements.get('join___70___jml_fb_mp_orders_contents___unit_quantity_1').getValue();
var qty2 = form_30.formElements.get('join___70___jml_fb_mp_orders_contents___unit_quantity_2').getValue();

var totalqty = parseFloat(qty0) + parseFloat(qty1) + parseFloat(qty2);
form_30.formElements.get('jml_fb_mp_orders___shipping_cost').update(totalqty);

}

But it works only if the element is repeated one time minimum...

Any support will be appreciate...

Regards,

Eloise

 

[cheesegrits]

You'll need to use a wildcard selector, so ...

function sumQuantity(){
    var qtys = document.getElements('*[id^=join___70___jml_fb_mp_orders_contents___unit_quantity_]');
    var totalqty = 0;
    qtys.each(function (qty) {
        totalqty += parseFloat(form_30.formElements.get(qty).getValue());
    }
    form_30.formElements.get('jml_fb_mp_orders___shipping_cost').update(totalqty);
}

... which should select all elements with an ID starting with join___70___jml_fb_mp_orders_contents___unit_quantity_, and stuff them into the qtys array. Which you can then iterate through and sum the values.

-- hugh

 

[waby]

Thanks for your help. Unfortunately it doesn't work. I have also tried this :

function sumQuantity(){
var qtys = document.getElements('*[id^=join___70___jml_fb_mp_orders_contents___unit_quantity_]');
var totalqty = 0;
qtys.each(function (qty) {
totalqty += parseFloat(form_30.formElements.get(qty).getValue())});

form_30.formElements.get('jml_fb_mp_orders___shipping_cost').update(totalqty);
}

without success too.


Regards,

 

[cheesegrits]

There may be an error in my code, it's hard to write error free code in a vacuum.

Can you point me at your page so I can debug it?

-- hugh

 

[waby]

Thanks for your help. Here is the link to have a look

http://www.missmarmalade.com/home4/...emid=775&formid=30&rowid=10&listid=28&lang=en

Regards,

 

[cheesegrits]

Where is sumQuantity() defined? I see where you are calling it, but the actual function itself is not included anywhere on the page.

Usual way to add your own functions to the form's page is to put them in a ./components/com_fabrik/js/form_X.js file, where X is the numeric ID of your form. So in this case, form_30.js.

-- hugh

 

[waby]

Humm, sorry it was not very clear. So here is what I have done :

I calculate the Subtotal Quantity and then the Total Quantity which is the sum of the Subtotal Quantity.

I upload the 30.js with this script :

function sumSubtotal(){
var num = document.getElements('*[id^=join___73___jml_fb_mp_orders_contents___gourmandise_number_]');
var qty = document.getElements('*[id^=join___73___jml_fb_mp_orders_contents___unit_quantity_]');

var subtqty = parseInt(num) * parseFloat(qty);

document.getElements('*[id^=join___73___jml_fb_mp_orders_contents___subtotal_quantity_]').update(subtqty);

}

function sumQuantity(){
var qtys = document.getElements('*[id^=join___73___jml_fb_mp_orders_contents___subtotal_quantity_]');
var totalqty = 0;
qtys.each(function (qty) {
totalqty += parseFloat(form_30.formElements.get(qty).getValue());
}
form_30.formElements.get('jml_fb_mp_orders___total_qty').update(totalqty);
}

I put the function "sumSubtotal();" on change in these elements :

- gourmandise_number (Number)
- unit_quantity (Quantity)

and the result of the calculation in :

- subtotal_quantity (Subtotal Qty)


I put the function "sumQuantity();" on change in these elements :

- subtotal_quantity (Subtotal Qty)
- gourmandise_number (Number)

and the result of the calculation in :

- total_qty (Total Quantity)

Any functions does not work. Thanks for your help

Regards,

Eloise

 

[rob]

Hi I think this is/was a bug in the way we load the custom scripts, in that I think they are loading after the onload js event is called, hence you get the error

sumShipping is not defined

If you update from github those custom js files should now get loaded earlier and that should fix the issue for you

Cheers
Rob

 

[waby]

Hi,

I have updated the website. Unfortunately, it doesn't work yet. I have also simplified the form to keep only the elements we need to fix this problem.

Thanks for your help.

Regards,

 

[rackem]

I had been wanting to do this for a while and your post got me thinking about it again. The following code is based off of cheesegrits example above and it is working to sum up the integer values of an element in a repeated group.

function sumNetCash(){
    var qtys = document.getElements('[id^=join___13___mps_bouts___cash_]');
    var sum = 0;
	qtys.each(function (val) {
        sum += parseInt(form_6.formElements.get(val.id).getValue());
    });
	form_6.formElements.get('mps_events___net_cash').update(sum);
}

Of course you will need to change variables and names where appropriate.

 

[rob]

my login to the site no longer works so I can't comment on why it doesn't work.
What rackem suggests sounds pretty good though

 

[waby]

Yep ! With the update of Rob and the suggestion of rackem it works !

Thanks all of you