Question

I’m using CakePHP 2.2.3 to generate a radioset that I then apply a jQuery buttonset to.

The CakePHP snippet:

echo $this->Form->input('contact_address_type', array(
    'type' => 'radio',
    'legend' => false,
    'options' => array('domestic' => 'Domestic', 'po_box' => 'Domestic PO Box', 'foreign' => 'Foreign'),
    'div' => array('class' => 'contact address_type')
));

The jQuery UI snippet:

$('.contact.address_type').buttonset();

When the HTML is generated, there is a hidden field that shares the same name as the radio set. This is done so that when the form is submitted, even if the radioset is not selected, I still get a value (albeit, blank) in my request->data.

However, the jQuery UI button set code does not like this when to select one of the options, because it expects all elements that share the name of the selected radio option in the form to have button widgets associated with them. At this point, the associate jQuery UI ticket is wontfix .

I’m loathe to submit a ticket to CakePHP, since having a hidden field with the same name to default a value for a non selected radio set is a legitimate practice.

This jsFiddle shows an example. You’ll need to open your javascript console to see the generated error when a button is selected.

Answer 1

One possible answer is to generate a fake radio option that does not have a label.

This will prevent it from being included in the rendered buttonset, but it still gets a button object attached to it. You also need to default the radio to checked, so that if no other button is selected, that default value will be submitted.

echo $this->Form->input('contact_address_type', array(
    'type' => 'radio',
    'legend' => false,
    'options' => array('domestic' => 'Domestic', 'po_box' => 'Domestic PO Box', 'foreign' => 'Foreign'),
    'value' => false,
    'before' => $this->Form->radio('contact_address_type', array('' => ''), array('legend' => false, 'checked' => 'checked', 'value' => false, 'label' => false)),
    'div' => array('class' => 'contact address_type')
));

Another option is to force a default selection on the user, so you know there will be an option selected.

echo $this->Form->input('contact_address_type', array(
    'type' => 'radio',
    'legend' => false,
    'options' => array('domestic' => 'Domestic', 'po_box' => 'Domestic PO Box', 'foreign' => 'Foreign'),
    'value' => 'domestic',
    'div' => array('class' => 'contact address_type')
));

But I’d like to see if there are better alternatives.