Support

Account

Home Forums Add-ons Repeater Field Repeater field – different default values sets

Solving

Repeater field – different default values sets

  • 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

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

  • Alright…Thanks.

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

    Thanks

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

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

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

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

The topic ‘Repeater field – different default values sets’ is closed to new replies.