Search code examples
zend-frameworkzend-formzend-decorators

How to apply decorators on the Input Title of radio button in Zend Framework


I have a zend form and a I need the final Output HTML of the Radio Group to be like this :

<div>
     <span class='radio_title'>Gender</span> <!-- The issue is in this line -->
     <span class='felement'>
          <label ....> <input type="radio" ...... value="male" /></label>
          <label ....> <input type="radio" ...... value="female" /></label>
     </span>
</div>

(i.e.) Replace the default dt and dd with customized div or span tags

I created a decorator as follows:

$decorator = array(
'ViewHelper',
'Errors',
   array(array('data' => 'HtmlTag'), array('tag' => 'span', 'class'=> 'felement')),
   // the next line is never applied
   array('Label', array('tag' => 'span', 'class'=> 'fradio' , 'placement'=>'prepend') ),
   array(array('row' => 'HtmlTag'), array('tag' => "div"))
);

$gender = new Zend_Form_Element_Radio("gender",
        array(
              "label"=>"Gender",
              'multiOptions'=>array(
              'male'=>'Male',
              'female'=>'Female'
            ),
            "decorators"=>$decorator
));

and I got this output instead:

<dt id="gender-label">
      <label class="optional">Gender</label>
</dt>
<!-- i don't know why the Main Label of the radio group didn't 
have the Label decorator applied to it -->
<div>    
   <span class="felement">
     <label for="gender-male"><input type="radio" disablefor="1" checked="checked" value="male" id="gender-male" name="gender">Male</label>
      <label for="gender-female"><input type="radio" disablefor="1" value="female" id="gender-female" name="gender">Female</label>    
   </span> 
</div>

Solution

  • I Applied this Decorator:

    array(
                'ViewHelper',
                'Errors',               
                    array(array('data' => 'HtmlTag'), array('tag' => 'div', 'class'=> 'fradioelement')),
                    array('Label', array('tag' => 'span', 'class'=> 'fradiotitle') ),
                    array('description', array('tag' => 'span')),
                    array(array('row' => 'HtmlTag'), array('tag' => "div","class"=>"radioelement"))
    
                );
    

    And it gave me this output:

    <div class="radioelement">
        <span id="gender-label"><label class="fradiotitle optional" for="gender">Gender</label></span>
        <div class="fradioelement">
                <label for="gender-male"><input type="radio" checked="checked" value="male" id="gender-male" name="gender">Male</label>
                <label for="gender-female"><input type="radio" value="female" id="gender-female" name="gender">Female</label>
        </div>
     </div>
    

    Which is almost what I needed.

    ** I had to add :

    'disableLoadDefaultDecorators' => true
    

    in the options of the element