Problem using grid field to feed the labels in a radio field

Question

I’m hoping I can get some help with a problem I’ve been struggling with for a few days. I’m looking to maintain about 10 radio fields that can each be used many times over for a website that will include quizzes. All of the fields will have option values A, B, C, but the labels will vary depending on the quiz.

I have one channel where the values will be saved for the users in a separate radio field, and another channel where the labels are in grid fields.

In my template, I have channel entry tags nested inside channel form tags. The answers are being saved properly, but I’m having trouble getting the labels to display correctly. If I have the code as below, it displays the label for option A 3 times, but the radio field saves correctly, depending on which button I select. If I remove the limit, everything repeats 3 times, but still save correctly if I select the 1st, 2nd, or 3rd option from any of the repeats.

Within the channel entry tags I have the following code, where ‘dp1_check’ is the field that holds the answers in the channel 'sd101_interact', and ‘decision_point_1:dp_option’ is column in the grid field with the labels in the channel 'sd101_decision_points'. The grid field also contains other columns related to the option selected, such as the feedback response for each option, the order (A/B/C), and the question. The grid has 3 rows, one for each option.


{exp:channel:form 
  channel="sd101_interact" 
  url_title="{logged_in_member_id}interact"
  return="/…."}
    {exp:channel:entries 
       channel="sd101_decision_points" 
       url_title="sd101fpd" 
       dynamic="no"}

{decision_point_1 limit="1"}
    {options:dp1_check}
          <input type="radio" name="dp1_check" value="{option_value}" {checked}>{decision_point_1:dp_option}<br>
     {/options:dp1_check}<br>
 {/decision_point_1}

  {/exp:channel:entries}
{/exp:channel:form

Could someone give me an idea of how I can make this work, so it pulls the labels once for each option. I attempted an embed for the label, but it just displayed all 3 options for each radio button.

Thank you.

Answer 1

You can simplify your problems by un-nesting the channel:entries tag: it does not use any information from the channel:form response to modify the channel:entries call, which means nesting the call is not required to get the right output. So do this call elsewhere and store the values, then just retrieve them later as needed (e.g. within the channel:form tag pair).

You could do this using stash, but personally I prefer to use layout variables, specifically {layout:set:append...}, for this type of thing.

One approach using layout variables would be to store the output of your sd101_decision_points channel entries tag using {layout:set:append...} on a parent template and then retrieve these values within the channel form tag (which would need to be on a later template in the layout series). To step through the values in the array (to get A, B, C answers) use the count variable of the channel:form options loop as the index value in the tag to retrieve the layout variable - vis

{layout:label_array index='{count}'}

How this worked in practice

Here is a refactoring of the code to use layouts as suggested: it works (and formed the basis of the solution used on the site).

1 - Make a duplicate copy of your template, and name it with the same name as the original but with _1 appended (or some other memorable related name). In the example below it is renamed as "cats.html".

2 - Replace the content of the original file with this simpler version - which has the sole purpose of capturing the values of the option labels / values from channel sd101_decision_points and the status of the response from sd101_interact, then sending on template processing to the second copy of your original template (now called 'cats').

{layout="sd101/cats"}
{exp:channel:entries 
    channel="sd101_decision_points" 
    url_title="sd101fpd" 
    dynamic="no"}
    {decision_point_1}
        {layout:set:append name='label'}{decision_point_1:dp_option}{/layout:set:append}
        {layout:set:append name='value'}{decision_point_1:order}{/layout:set:append}
    {/decision_point_1}
{/exp:channel:entries}
{exp:channel:entries 
    channel="sd101_interact" 
    url_title="1interact" 
    dynamic="no"}
    {layout:set name='selected' value="{dp1_check}"}
{/exp:channel:entries}

3 - Now modify your original template to use these layout variables. The main difference from the original is replacing the EE options:my_field construction with a long-hand way of building the form (to make it possible to use the {index} variable to retrieve the stored layout variables. Something like:

{layout="layouts/.sd101_main"}
{exp:channel:form 
    channel="sd101_interact" 
    url_title="{logged_in_member_id}interact"
    return="sd101/fpd7494"}
    {layout:value}
        <div>
            <input type="radio" id="dp1_check_{index}" name="dp1_check" value="{value}" {if value == layout:selected} checked {/if}>
            <label for="dp1_check_{index}">{layout:label index="{index}"}</label>
        </div>
    {/layout:value}
    <button type=“submit” class="btn btn-default btn-lg">DECISION SELECTION</button>
{/exp:channel:form}

Notice the use of the index parameter in the {layout:value} loop in the second template fragment - this makes it possible to link the names of the saved label and value options specified.

There are obviously lots of other games you can play with this sort of approach, but hopefully this gives you an idea of how it might work.

HTH