Add an ID to radio button within Channel Form

Question

I need to add an ID attribute to a PT Checkbox within Channel Form so I can target it with JS.

Any idea how I can do this?

The standard usage for Channel Form is '{field:my_radio_button}' which doesn't give me the flexibility of adding and ID.

Input appreciated!

Answer 1

I don't really use channel forms atm but could this not be done using an if statement? ref docs safecracker ee 2.4

{if radio} {options} <label class="checkbox">{option_value}<label
class="checkbox"> <input type="radio" id="{field_name}"
name="{field_name}" value="{option_value}"{checked}> </label>
{/options} {/if}

Then use js on the field name

Answer 2

Use your existing simple method of outputting the radio buttons then copy the rendered code and manually add the buttons with whatever you need.

From memory I believe the name attribute is the primary identifier for the field/radio.

Its not perfect but it does work. Obviously if you change your values back end you'll have to ammemd accordingly.

Or, wrap the simple code in a div with an id and use that to target the contents.

Answer 3

PT fields give the option of {option_value} and {option_name} Provided you've set up your fields with the value and name.

In your field set up you put (on each line)

option_1 : Option 1
option_2 : Option 2
etc etc

you then have access to those in your templates. here's an example:

{options:event}
    <label class="checkbox">
        <input type="checkbox" name="event[]" value="{option_value}" {checked}><span>{option_name}</span>
    </label>
{/options:event} 

so for id you'd use:

{options:event}
    <label class="checkbox">
        <input type="checkbox" id="event_{option_value}" name="event[]" value="{option_value}" {checked}><span>{option_name}</span>
    </label>
{/options:event} 

For mine I used checkboxes but the format is the same for radio buttons