Question

I’ve a working backend module with various forms to manage several different tables. On one of the forms I have a radio button group (radios element on Magento). Here is the code snippet for this radio group:

//radio group
$fieldset->addField('radio_group', 'radios', array(
        'label'     => Mage::helper('banners')->__('Select campaign type'),
        'name'      => 'title',
        'onclick'   => '',
        'onchange'  => '',
        'value'     => '1',
        'values'    => array(
                        array('value'=>'1','label'=>'Imagen'),
                        array('value'=>'2','label'=>'HTML'),
                        array('value'=>'3','label'=>'Producto'),
                        ),
        'disabled'  => false,
        'readonly'  => false,
        'tabindex'  => 3
));

There is no way I can find how to manage the onclik and the onchange events. Where do I need to add the code? The actions to be executed are simple, I’ll just enable/disable other controls on the same page according to the selected radio button.

Any suggestion, sample code, tutorial? I’ve done lot of googling with no luck, I’ve found lot of samples but all refered to how to setup a new admin form, wich I have already done not once but several times.

Answer 1

One way you could get around this issue is by adding update layout.xml to your module (or a local.xml)

You can include your js in layout.xml using two different method, the only different is where you need to put your js file

Javascript location : /js/your_js_file.js

<adminhtml_xxx_yyy>
    <reference name="head">
        <action method="addJs"><script>your_js_file.js</script></action>
    </reference>
</adminhtml_xxx_yyy>

or

Javascript location : /skin/adminhtml/default/default/your_js_file.js

<adminhtml_xxx_yyy>
    <reference name="head">
        <action method="addItem"><type>skin_js</type><name>your_js_file.js</name></action>
    </reference>
</adminhtml_xxx_yyy>

Add a css class name to each radio button

$fieldset->addField('radio_group', 'radios', array(
   ......
   'class'     => 'campaign_type',
   ....
));

In your_js_file.js ( http://fiddle.jshell.net/hX2u3/ )

$$('.campaign_type').each(function(curInput) {
   Event.observe(curInput, 'click', function() {
        alert('some click logic goes here');
    });
   Event.observe(curInput, 'change', function() {
        alert('some change logic goes here');
    });
});​