Home Forums Front-end Issues Adding a sub field to a repeater with JavaScript


Adding a sub field to a repeater with JavaScript

    • micke

    • May 15, 2019 at 5:03 pm

    I’m working on a project where I’m fetching data from an API and populate ACF-fields with that data, then the user have the option to edit the fields before saving.

    The problem I have is that I’m also receiving image urls that I want to add to a repeater field. I get it to work in PHP, but I would need to do that in JS so that the changes are seen in the front-end as the are added.

    The PHP-code that works but requires refresh to show the new rows looks like this.

    foreach ($_POST['images'] as $imageUrl) {
        $row = array(
            'img_or_vid' => 'url',
            'image_url' => $imageUrl
      add_row('field_56728ffb6a733', $row, $_POST['postId']);

    So, I have an array of image urls in $_POST[‘images’]. For each image url I need to add a row where img_or_vid is ‘url’ and the image_url field is the url inside $_POST[‘images’].

    Is there some way of doing this with JS in the frontend? Maybe I’m missing something obvious since I’m so new to ACF.

  • I have generally done this in the past by targeting the link that adds a row and triggering its click action.

    $('[data-key="your repeater key here"] .acf-actions a.add-row').trigger('click');

    Then adding an append action to populate the sub field using the fields set method

    • micke

    • May 21, 2019 at 6:05 pm

    Thanks! Got it to work!

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.