Home Forums General Issues Target repeater sub-field with Javascript


Target repeater sub-field with Javascript

  • How do you target the sub-fields inside a repeater field, so the JS applies to the sub-field when appending new groups???

    Been looking, but I got really lost as to where even to start. And the JavaScript API is falling a little short on explaining how to work with repeaters.

    I’m working on a form to add orders for a bakery. The form has a repeater which holds the options for each different bread order. In here the select field for TYPE OF DOUGH does much of the pre-selection for the other fields (size, shape, extras).

    I’ve managed to target the select field of TYPE OF DOUGH to send and modify data through AJAX, but when adding another repeater row the code doesn’t work.

    Here’s my code for php and js:


    jQuery(document).ready(function ($) {
        // field key for TYPE OF DOUGH select field inside repeater field
        var field = acf.getField("field_609b103fcd576");
        field.on("change", function (e) {
            var value = field.val();
            var data = {
                "action": "get_size_options",
                "type_of_dough": value,
                url: ajax_object.ajax_url,
                type: "post",
                data: data,
                dataType: "json",
                success: function (data) {


    // enqueue the scripts
    function fw_acf_register_scripts() {
        // enqueue js file with ajax functions
            get_template_directory_uri() . '/assets/js/autopopulate.js',
            ['ajax_url' => admin_url('admin-ajax.php')]
    add_action('acf/input/admin_enqueue_scripts', 'fw_acf_register_scripts');
    // ex. function to get options for the other fields
    function get_size_options() {
        $meta_value = fw_get_term_id($_POST['type_of_dough'], 'dough'); 
        // just a function to get the ID for the taxonomy from the slug, 
        // so it just returns a number, say 501 which is then used for the term query
        $size_options = array();
        $terms_args = array(
            'taxonomy'   => 'size',
            'hide_empty' => false,
            'meta_key'   => 'tax_position',
            'orderby'    => 'tax_position',
            'order'      => 'ASC',
        if ($meta_value_masa) {
            $terms_args['meta_query'] = array(
                    'key'     => 'dough',
                    'value'   => $meta_value,
                    'compare' => 'LIKE',
        $terms = get_terms($terms_args);
        foreach ($terms as $term) {
            $size_options[$term->term_id] = $term->name;
    add_action('wp_ajax_get_size_options', 'get_size_options');
  • Ah thanks 🙂

    I ended up doing trial and error, and found this as a solution:

    // where field_609b103fcd576 is a sub-field in my repeater
    acf.addAction("new_field/key=field_609b103fcd576", function ($field) {
        $field.on("change", function (e) {
            var value = $field.val();

    Not sure if it’s the optimal one, but it worked 🤷‍♀️

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

You must be logged in to reply to this topic.