Let us create two text control elements in HTML form:

$element = $fieldset->addField('one', 'text', array(
    'label'     => Mage::helper('helpdesk')->__('Carbon Copy'),
    'name'      => 'one',
    'value'     => '',
    'required'  => false,

$element = $fieldset->addField('two', 'text', array(
    'label'     => Mage::helper('helpdesk')->__('Blind Carbon Copy'),
    'name'      => 'two',
    'value'     => '',
    'required'  => false

To create dependency between these fields, we need to add to form a new hidden block with special controller of one field’s value ant other’s visibility. So, override method toHtml() and add to layout block of adminhtml/widget_form_element_dependence type. There we create two field maps, which must contain field id?s, and their names respectively (it’s better to have them match) and dependency itself.

protected function _toHtml() 
    $dependency_block = $this->getLayout() 
        ->addFieldMap('one', 'one') 
        ->addFieldMap('two', 'two') 
        ->addFieldDependence('one', 'two', 'true'); 

    return parent::_toHtml() . $dependency_block->toHtml(); 

Now, if we enter “true” in field one and jump to other control element (so our element loses focus and event onChange is generated), we will have field two visible. If we clear or enter other text in one field, two will disappear again.

The problem is more complex, if visibility must depend on button, anchor or reference. In this case we need an additional trigger field, of type hidden. But setting value of that field, by script, will not dispatch onChange event, so we need to fire it manually.

Let’s create a reference, hidden control and text field.

$fieldset->addField('hiddenCtrl', 'hidden', array('name'=>'hiddenCtrl', 'value' => 'false'));
$element = $fieldset->addField('invisibleCtrl', 'text', array( 
    'label'     => Mage::helper('helpdesk')->__('Invisible'), 
    'name'      => 'invisibleCtrl', 
    'value'     => '', 
    'required'  => false, 

Visibility controller is the same and in the same place, setting dependency between hidden and text field.

$dependency_block = $this->getLayout() 
    ->addFieldMap('hiddenCtrl', 'hiddenCtrl') 
    ->addFieldMap('invisibleCtrl', 'invisibleCtrl') 
    ->addFieldDependence('invisibleCtrl', 'hiddenCtrl', 'true') ;

We also need a script to run on click of the reference, switch values of hidden field and manually generate an event. It will have one argument – identifier of hidden field, where value to be switched.

function switchVisible(controlId) {
    // Switch values
    if(document.getElementById(controlId).value == 'true') { 
        document.getElementById(controlId).value = 'false'; 
    } else { 
        document.getElementById(controlId).value = 'true'; 

    // Emulate event
    if(document.createEventObject) { 
        var evt = document.createEventObject(); 
        document.getElementById(controlId).fireEvent('onchange', evt); 
    } else { 
        var evt = document.createEvent('HTMLEvents'); 
        evt.initEvent('change', false, true); 


A compatibility note: while document.getElementById method is a standard DOM function, not supported only by ancient browsers like Netscape Navigator, event generation is slightly differs in Internet Explorer, Mozilla and Chrome. So that task we implemented as two-branch condition with simple detection of browser model. If document.createEventObject method exists, then browser uses IE’s DOM model, in the other case – the model is Mozilla/Chrome.

Related Posts
Magento 2: Enhancing numerical input with Spinner Widget Advanced SEO Suite Onboarding Checklist (Part 3): How To Tweak SEO Suite Extension settings? Advanced SEO Suite Onboarding Checklist (Part 9): Check SEO Templates

Enjoyed the Read?

Don’t miss our next article!