Home Forums Add-ons Repeater Field Using jQuery on Repeater Field Rows


Using jQuery on Repeater Field Rows

  • 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;

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

  • 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');
  • 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);
Viewing 3 posts - 1 through 3 (of 3 total)

The topic ‘Using jQuery on Repeater Field Rows’ is closed to new replies.