Using jQuery on Repeater Field Rows

• viktorfonster

• July 12, 2019 at 5:22 pm

Hi,

I have a repeater field with subfields title, price, quanitiy and total. I am trying, using jQuery to calculate price x quantity to be displayed in the total field. Usually i use

var price = parseFloat(jQuery('#price').val(), 10);
var quantitiy= parseFloat(jQuery('#quantity').val(), 10);
var total = price * quantity;
jQuery('#total').val(total);

As you know it really doesnt work since its a repeater field.. Anyone got an idea of how to solve my problem?
Thanks

• John Huebner

• July 12, 2019 at 9:49 pm

What is triggering the jquery to run? What element have you attached your JS to.

When using js you need to use field keys

What you need to do is find the current row.

// element represents an field 
var row = element.closest('acf-row');

one you have the row then you find a field in the row, I a assuming a field of type “input”

var field = row.find('[data-key="your field key"] .acf-input input');

• viktorfonster

• July 12, 2019 at 10:46 pm

Thanks for the reply. Got it working now 🙂

jQuery(".acf-repeater .acf-row").each(function(i, element) {
      var row = $(element);
      var orderrow_quantity = row.find(".orderrow-quantity input").val();
      var orderrow_price_before_tax = row.find(".orderrow-price-before-vat input").val();
      var orderrow_total_before_tax = orderrow_quantity * orderrow_price_before_tax;
      var orderrow_total_after_tax = orderrow_total_before_tax * vat_percentage;
      row.find(".orderrow-total-before-vat input").val(orderrow_total_before_tax);
      row.find(".orderrow-total-after-vat input").val(orderrow_total_after_tax);
 });