How do I format Zend_Form_Element_Radio so that the label matches the input?

Question

The default decorator for Zend_Form_Element_Radio is

<label for="type_id-1"><input type="radio" name="type_id" id="type_id-1" value="1">Pack</label> 

The label tag wraps the input tag. Instead, I would like to look like

 <input type="radio" name="type_id" id="type_id-1" value="1"><label for="type_id-1">Pack</label> 

I thought this might be due to the "label" of the item, but this is different. Even with the following code, I still get a label wrapped in a radio. When I use this form code.

 public function init() { parent::init(); $this->setName('createdomain'); $type_id = new Zend_Form_Element_Radio('type_id'); $type_id->setLabel('Please Choose') ->setRequired() ->setMultiOptions(array('m' => "male", 'f' => 'female')); $this->addElement($type_id); $this->setElementDecorators(array( 'ViewHelper', array('Label',array('placement' => 'APPEND')), )); } 

I get this HTML as a result

 <form id="createdomain" enctype="application/x-www-form-urlencoded" action="" method="post"><dl class="zend_form"> <label for="type_id-m"><input type="radio" name="type_id" id="type_id-m" value="m">male</label><br /> <label for="type_id-f"><input type="radio" name="type_id" id="type_id-f" value="f">female</label> <label for="type_id" class="required">Please Choose</label></dl> </form> 

Note that the label tag wraps the input tag?

Answer 1

This is a problem with jQuery, not the Zend Framework. The wrapper of the element in the tag tag is perfectly correct, it just jQuery UI does not support it. I published a bug report.

* Update answer *

However, I think that you are trying to use (as you commented) to use a set of jQuery UI buttons, which I did when I encountered a jQuery UI error. In short, you have two options until the error is fixed:

1) Use the Dennis D. helper helper to move the default switch item.

2) Replace the Zend Framework radio button browser assistant with code written by Dennis D. It is displayed in the Zend_View_Helper_FormRadio file on line 169 (Zend framework Version 1.11.0).

First create a new shortcut and close the tag

 // Create the label $label = '<label' . $this->_htmlAttribs($label_attribs) . ' for="' . $optId . '">' . (('prepend' == $labelPlacement) ? $opt_label : '') . '<input type="' . $this->_inputType . '"' . $opt_label . '</label>'; 

Secondly, change the code that the switch creates:

 // Create the radio button $radio = '<input type="' . $this->_inputType . '"' 

Third, remove the closing tag tag (as you already did) in the view helper, change:

 . $endTag . (('append' == $labelPlacement) ? $opt_label : '') . '</label>'; 

And just replace with:

 . $endTag; 

Then combine the radio and the label using positioning:

 // Combine the label and the radio button if ('prepend' == $labelPlacement) { $radio = $label . $radio; } else { $radio = $radio . $label; } 

And that he (again Dennis D did it in the view helper), but the changed code should look like (starting from line 169:

 // Create the label $label = '<label' . $this->_htmlAttribs($label_attribs) . ' for="' . $optId . '">' . $opt_label . '</label>'; // Create the radio button $radio = '<input type="' . $this->_inputType . '"' . ' name="' . $name . '"' . ' id="' . $optId . '"' . ' value="' . $this->view->escape($opt_value) . '"' . $checked . $disabled . $this->_htmlAttribs($attribs) . $endTag; // Combine the label and the radio button if ('prepend' == $labelPlacement) { $radio = $label . $radio; } else { $radio = $radio . $label; } // add to the array of radio buttons $list[] = $radio; 

Answer 2

I create a special view helper called MyLib_View_Helper_FormRadio (so it is automatically called if it happens at boot), and I override and change the Zend_View_Helper_FormRadio :: formRadio () method on line 160 (version 1.11), where the switch is created.

---

 $label = '<label ' . $this->_htmlAttribs($label_attribs) . ' for="' . $optId . '">' . $opt_label .'</label>'; // Wrap the radios in labels $radio = '<input type="' . $this->_inputType . '"' . ' name="' . $name . '"' . ' id="' . $optId . '"' . ' value="' . $this->view->escape($opt_value) . '"' . $checked . $disabled . $this->_htmlAttribs($attribs) . $endTag; if ('prepend' == $labelPlacement) { $radio = $label . $radio; } elseif ('append' == $labelPlacement) { $radio .= $label; } 

Answer 3

Probably my best idea is to modify the ZF [Zend Framework] HTML code from jQuery to fit the jQuery UI format.

Here is the solution:

in ZF Shape design:

 $this->setElementDecorators(array( 'ViewHelper', 'Errors', array(array('rowElement'=>'HtmlTag'), array('tag'=>'div', 'class'=>'element')), array('Label', array('class'=>'first')), )); 

The important thing here is a div with a class = element that will wrap all inputs [so it's easy to get to them in jQuery]

And here is the JS code:

 $(function() { $( "div.element > label" ).each(function() { $('input', this).after('<label for="'+$(this).attr('for')+'"></label>'); $('label', this).text($(this).text()); var input = $('input', this).detach(); var label = $('label', this).detach(); var parent = $(this).parent(); $(this).remove(); input.appendTo(parent); label.appendTo(parent); }); $( "div.element" ).buttonset(); }); 

Answer 4

This is the best you could do, and I found it after a lot of pain :))

 $radios = new Zend_Form_Element_Radio('notifications'); $notificationTypesArray = array(); foreach ($notificationTypes as $key => $value) { $notificationTypesArray[$key] = $value $radios->removeDecorator('DtDdWrapper'); $radios->removeDecorator('HtmlTag'); $radios->setSeparator('</td></tr><tr><td class="notification_type_row">'); $radios->setDecorators(array( 'ViewHelper', 'Errors', array(array('data' => 'HtmlTag'), array('tag' => 'td', 'class' => 'notification_type_row')), array('Label', array('tag' => 'span')), array(array('row' => 'HtmlTag'), array('tag' => 'tr')), ); $radios->addMultiOptions($notificationTypesArray); $this->addElement($radios); 

Answer 5

My answer from another post on the same question should help you zend form for multicheckbox remove input from shortcuts

Answer 6

Try:

 $this->setElementDecorators(array( 'ViewHelper', array('Label',array('placement' => 'APPEND')), )); 

Check out the zendcasts video about it , it's really great. Decorators can be very complex with ZF, but this video really explains it well.