Forum

Thread tagged as: Question, Problem, Field-Types

custom markup input radio

Hi,

I have form with a more complicated markup for radio buttons wich I can't create with way perch handles them. Is there a way to disable the normal behavior? I need to create a markup like this:

<div class="product-option">
  <perch:input type="radio" class="radio-options" id="option-1" name="product-1-option" value="cardboard" label="cardboard" checked/>
  <label for="option-1" >
    <img src="/images/configurator/cardboard01.png" alt="irgendwas">
    <span>cardboard</span>
  </label>
</div>

etc.
Gabriel Braun

Gabriel Braun 0 points

  • 6 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

6 years ago

Which part isn't working?
Gabriel Braun

Gabriel Braun 0 points

6 years ago

I didn't find away to create the above code with the usual code for radio buttons form the docs, where perch automatically creates labels. Every label needs to have it's own image and the value needs to be wrapped in a span.
Gabriel Braun

Gabriel Braun 0 points

6 years ago

Here is a code that should illustrate the problem more clearly. Perch alway adds another extra label. Template:

        <div class="product-option">
          <perch:input type="radio" class="radio-options" id="option" options="cardboard option 1" label="cardboard"/>
          <perch:label for="option" >
            <img src="/images/configurator/cardboard-option-1.png" alt="irgendwas">
            <span>cardboard option 1</span>
          </perch:label>
        </div>

        <div class="product-option">
          <perch:input type="radio" class="radio-options" id="option" options="cardboard option 2" label="cardboard"/>
          <perch:label for="option" >
            <img src="/images/configurator/cardboard-option-1.png" alt="irgendwas">
            <span>cardboard option 2</span>
          </perch:label>
        </div>

Output:

<div class="product-option">
          <input id="product_1_option1" name="option" class="radio-options" type="radio" value="cardboard option 1" /><label for="product_1_option1">cardboard option 1</label>
          <label for="product_1_option">
            <img src="/images/configurator/cardboard-option-1.png" alt="irgendwas">
            <span>cardboard option 1</span>
          </label>
        </div>

        <div class="product-option">
          <input id="product_1_option1" name="option" class="radio-options" type="radio" value="cardboard option 2" /><label for="product_1_option1">cardboard option 2</label>
          <label for="product_1_option">
            <img src="/images/configurator/cardboard-option-1.png" alt="irgendwas">
            <span>cardboard option 2</span>
          </label>
        </div>
Drew McLellan

Drew McLellan 2638 points
Perch Support

6 years ago

I see what you mean. type="radio" outputs a set of radio buttons, not an individual button. If you use it to create a number of single-item sets they won't actually behave like radio buttons.
Gabriel Braun

Gabriel Braun 0 points

6 years ago

Do have an idea for a work around?
Drew McLellan

Drew McLellan 2638 points
Perch Support

6 years ago

You could use wrap="div.product-option" to wrap the button in a div, but I'm not sure about the image.
Gabriel Braun

Gabriel Braun 0 points

6 years ago

Mh, I see. Than I probably go with checkboxes and fake the radio button behavior with jQuery, but that's not ideal. I was thinking of creating an extra field type, but that's a bit over my head.
Drew McLellan

Drew McLellan 2638 points
Perch Support

6 years ago

If you're going down the JavaScript route anyway, you could add the images that way - that would fall back better without JS.
Gabriel Braun

Gabriel Braun 0 points

6 years ago

Yes, that's was also my concern, maybe I do it that way.