Support

Account

Home Forums Add-ons Repeater Field Display repeater field base on radio button selected

Solving

Display repeater field base on radio button selected

  • I’m new to ACF Pro and would like to display a repeater field, in separate div’s, based on the radio button selected. I have 3 radio button options in my repeater field:

    Boston : boston
    Newton : newton
    Both : both

    Once a radio button is selected I would like the content from the repeater field to be displayed in separate div’s on my page.

    – A repeater field in a separate div once the “boston” radio button is selected.
    – A repeater field in a separate div once the “newton” radio button is selected.
    – A repeater field displayed in both of the above div’s once the “both” radio button is selected.

    I’m pulling my hair out on this one and can figure it out. I know there has to be a simple solution.

    Please any help would be much appreciated.

    Thanks in advance

  • If i am understanding what you are trying to do you would want to set up some conditional logic.

    Your custom fields would look like this:
    Radio Custom Pield Set Up

    Boston logic:
    Boston Logic

    Newton logic:
    Newton Logic

  • Thanks theryanmark for heading me in the right direction! To be more clear…I have a repeater field labeled “workshops” with the following subfields:

    (Label: Class) (Field Name: title) (Title Name: title) (Type: Text)
    (Label: Class Link) (Field Name: link) (Title Name: link) (Type: Url)
    (Label: checkbox) (Field Name: checkbox) (Title Name: checkbox) (Type: Radio Button)

    Radio button Choices:
    Boston : boston
    Newton : newton
    Both : both

    What I would like to accomplish is when the admin inputs a workshop repeater field..I would like to place the field in different div’s based on the radio button selected..and if the “both” radio button is selected the pertaining repeater field would display in both div’s.

    Does this make sense? Am I heading in the right direction or is there a better way to accomplish this? I would think I would have to make an if and else statement in the PHP to accomplish this.

    Any help would be much appreciated.

  • I think you would want to do something like this:

    <?php if( have_rows('workshops') ): ?>
    
       <?php while ( have_rows('workshops') ) : the_row();
       
    		// assigns checkbox value to var
    		$location = get_sub_field('checkbox'); ?>
    
    		<div id="boston">
    			<?php if ( $location == 'boston' || $location == 'both' ): ?>
    				// boston information
    				<?php get_sub_field('title'); ?>
    				<?php get_sub_field('link') ?>
    			<?php endif ?>
    		</div>
    
    		<div id="newton">
    			<?php if ( $location == 'newton' || $location == 'both' ): ?>
    				// newton information		
    				<?php get_sub_field('title'); ?>
    				<?php get_sub_field('link') ?>
    			<?php endif ?>
    		</div>
    
    	<?php endwhile; ?>
    
    <?php endif; ?>

    Also you probably want your radio button choices to be flipped:

    boston : Boston
    newton : Newton
    both : Both
Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.