Froms App Radio Buttons Issue

    I've set up 2 radio buttons and although they appear to act normally, they appear in the elements tab on google console as all checked at all times. Will this effect the data when the form is posted?


    I've designed the site in a way that the inputs are invisible and the labels are used to control them. Perch prepends the labels FOR attribute and the input ID's with "form1_" which isn't a big deal, but also appends "0" to only the input ID's causing them to not match.


    I've tried removing the FOR attribute and nesting the input within the label but perch goes ahead and creates and adds "for="form1_"" to the input anyway.


    Here's my code:

    Code
    1. <perch:label>
    2. <span>...</span>
    3. <perch:input type="radio" id="bespoke" label="bespoke" name="type" />
    4. </perch:label>
    6. <perch:label>
    7. <span>...</span>
    8. <perch:input type="radio" id="modular" label="modular" name="type" />
    9. </perch:label>

    What I see on the google console:

    Code
    1. <label for="form1_">
    2. <span>...</span>
    3. <input type="radio" id="form1_bespoke0" name="type" checked="checked"/>
    4. </label>
    6. <label for="form1_">
    7. <span>...</span>
    8. <input type="radio" id="form1_modular0" name="type" checked="checked"/>
    9. </label>

    What I expect:

    Code
    1. <label>
    2. <span>...</span>
    3. <input type="radio" id="bespoke" name="type"/>
    4. </label>
    6. <label>
    7. <span>...</span>
    8. <input type="radio" id="modular" name="type"/>
    9. </label>

    How can I get this output please?

  • drewm

    Approved the thread.

    Hey Lee,


    Are they part of the same radio group? eg you need the user to return the value of either 'bespoke' or 'modular'?


    You could try this:


    Code
    1. <perch:input id="your_id_here" type="radio" options="Bespoke,Modular">

    If you use the same ID on the radio inputs, Perch will add them to a singular group.


    Code
    1. <label>
    2. <span>...</span>
    3. <perch:input type="radio" id="type" value="bespoke">
    4. </label>
    6. <label>
    7. <span>...</span>
    8. <perch:input type="radio" id="type" value="modular">
    9. </label>