Repeater field – different default values sets

• jlock

• June 13, 2019 at 7:24 pm

Hi

I have a repeater field which I wish to have prefilled with default values. The basic part I have done with the following:

<?php
add_filter('acf/load_value/key=field_5d014e5950741', 'default_value_product_specifications', 10, 3);
function default_value_product_specifications($value, $post_id, $field) {
    if ( get_post_status( $post_id ) === 'auto-draft' ) {
        if ($value === false) {
            $value = array(
                array(
                    'field_5d014ea450742' => 'Production',
                    'field_5d014eb250743' => '',
                ),
                array(
                    'field_5d014ea450742' => 'Materials',
                    'field_5d014eb250743' => '',
                ),
                array(
                    'field_5d014ea450742' => 'Cord',
                    'field_5d014eb250743' => '',
                ),
                array(
                    'field_5d014ea450742' => 'Dimensions (mm)',
                    'field_5d014eb250743' => '',
                ),
                array(
                    'field_5d014ea450742' => 'test (mm)',
                    'field_5d014eb250743' => '',
                ),
            );
        }
    }
    return $value;
}

The tricky part is, that I would like to have different sets of default values. My thought was to have a select where I can choose “Type 1”, “Type 2” etc. When choosing a type (and save manually to avoid ajax) the repeater field will be prefilled with the related fields.

Any guidance to make this?

Thanks

• John Huebner

• June 14, 2019 at 10:33 pm

The only way that this could be done would be by doing it with JavaScript. You would need to add an action on the “Type” field and based on that then populated the values of the repeater’s sub fields.

https://www.advancedcustomfields.com/resources/adding-custom-javascript-fields/

https://www.advancedcustomfields.com/resources/javascript-api/

• jlock

• June 14, 2019 at 10:39 pm

Alright…Thanks.

Anyone who can help with a concrete example on how to do this?

Thanks

• John Huebner

• June 14, 2019 at 10:58 pm

jQuery(document).ready(function($){
  if (typeof acf == 'undefined') { return; }
  // replace the following field key with your type field
  // an the field type with your field type
  $(document).on('change', '[data-key="field_579376f522130"] .acf-input select', function(e) {
    var field = acf.getField('field_579376f522130');
    var choice = field.val();
    // at this point you need to find the repeater
    // how you would do that is completely dependent on your field structure
    // what is the parent of this field?
    // what is the parent of the repeater?
    // you will need to know this especially if this repeater can appear on the page more than once
    // once you find the repeater you need to add/remove rows
    // and loop through those rows to set the values of the sub fields
  });
});

When building JS to do this type of thing is is highly specific to your exact needs and the way your fields are created. There really isn’t much that is generic and unfortunately, there aren’t may good examples to be found.

• John Huebner

• June 14, 2019 at 11:11 pm

I can give more pieces of the puzzle, but for that I will need information. For example
How is the repeater related to the choice field? Can the repeater be found more than once on the page?

• jlock

• June 14, 2019 at 11:14 pm

More help would be much appreciated.

There is no relation between them. My thought was just to have a select field where option1 could fetch and prefill fields from array1 and option2 could fetch from array2 or something like that?

• John Huebner

• June 14, 2019 at 11:43 pm

This could be done in PHP, but it would mean that you’d have to select the option, save the post and then when the page reloads you can populate it with the values you want based on the setting in the other field.

Continuing the JS example, if the repeater is only found on the page once, you can get the rows in the current repeater like this.

// find repeater rows, replace field_XYZ with repeater field key
var rows = $('[data-key="field_XYZ"] .acf-row');

// add rows
if (rows.length < YOUR NUMBER OF ROWS) {
  for (i=rows.length; i<YOUR NUMBER OF ROWS; i++) {
    $('[data-key="field_XYZ"] .acf-actions a.add-row').trigger('click');
  }
}

// remove rows
if (rows.length > YOUR NUMBER OF ROWS) {
  // remove rows from the end
  for (i=rows.length-1; i>=YOUR NUMBER OF ROWS; i--) {
    rows[i].find('a.remove-row').trigger('click');
  }
}

// populate rows
// counter holds current row
var counter = 0;
// values holds value for each row
var values = ['Production', 'Materials', 'Cord', 'Dimensions (mm)', 'test (mm)']
rows.each(function(index, element) {
  // just in case
  if (counter+1 > values.length) {
    // no value for this row
    return;
  }
  // assuming a text field
  // populate this row from values
  // key of text field
  $(element).find('[data-key="field_ZABC"] .acf-input input).val(values[counter]);
  counter++;
});