Javascript Hide element not working on IE but works on Firefox

Question

I'm asking help because i have a problem i can't resolve alone....

I'm working on Zend_Framework, i want to hide my checkbox when the value of my select is on the not concerned. Actually, i use javascript for this, and it works nice on Firefox. But when i want to test it on IE, it doesnt work. My checkbox are not hidden, they move on the right of the page.

My javascript function is :

function gestionEtat(id, value)
    {
                id_mat = "div_mat_"+id;
                var childStyle = document.getElementById(id_mat).firstChild.style;
                if(value != "non_concerne")
                {
                    childStyle.display="block";
                }
                else
                {
                    childStyle.display="none";
                }
    }

And my Controller is : (i have a request)

foreach ($rows as $edc)
{
$monEdc = new Zend_Form_Element_Select(
                    'edc_'.$edc['nomFormate_edc'],
                    array(
                            'label' => $edc['nom_edc'],
                            'elm_nl' => false,
                            'elm_size' => 6,
                            'onChange' => 'gestionEtat(this.id, this.value)',
                    )
            );
            $options = array(
                    'bon_etat' => 'Good state',
                    'a_changer' => 'Need to be changed',
                    'non_concerne' => 'Not concerned',
            );
            $monEdc->addMultiOptions($options);
            $this->addElement($monEdc);
            $gestionEdc = new Zend_Form_Element_MultiCheckbox(
                    'mat_edc_'.$edc['nomFormate_edc'],
                    array(
                            'label' => '',
                            'elm_size' => 3,
                            'multiOptions' => array(
                                    'necessary' => 'Necessary',
                                    'used' => 'Used',
                            )
                    )
            );
            $this->addElement($gestionEdc);

            $monEdc->addDecorators(array(
                    array('HtmlTag',array('tag'=>'div','id'=> 'div_edc_'.$edc['nomFormate_edc'],'style'=>'display:block;')))
            );

            $gestionEdc->addDecorators(array(
                    array('HtmlTag',array('tag'=>'div','id'=> 'div_mat_edc_'.$edc['nomFormate_edc'],'style'=>'display:block;')))
            );
}

Have u some ideas to help me ?

Answer 1

Using CSS would be better than applying an inline style via JavaScript to hide or show the checkout.

In the demo below, I have create a .hidden class to apply to the checkbox, which will hide it from view when applied.

Then I have applied an event listener to the select box to fire the function which adds or removes the .hidden class from the checkbox.

This should fix the issues you are facing in IE, as you are not trying to manipulate the NodeList in JavaScript (common area for issues cross browsers) and simply adding or removing a class to the element.

 function gestionEtat(id, value) { var id_mat = "div_mat_" + id; var childStyle = document.getElementById(id_mat); if (value === "non_concerne") { // Add hidden class (use += ' hidden' if checkbox already has a class) childStyle.className = "hidden"; } else { // Remove hidden class from checkbox childStyle.className = ""; } } // Trigger gestionEtat function every time the select box changes var selectBox = document.getElementById("select"); selectBox.addEventListener('change', function() { gestionEtat(1, this.value); }); 

 .hidden { display: none; } 

 <select id="select"> <option>1</option> <option>2</option> <option>non_concerne</option> </select> <input id="div_mat_1" type="checkbox" /> 

Answer 2

Finally, i found what i wanted to do. I post my function if someone else get the same problem (I found IE dont detect firstChild)

function gestionEtat(id, value)
{
    id_mat = "div_mat_"+id;
    var childStyle = document.getElementById(id_mat).firstChild.style;
    var childStyleIE = document.getElementById(id_mat).style;
    if(value != "non_concerne")
    {
        childStyle.display="block";
        childStyleIE.visibility="visible";
    }
    else
    {
        childStyle.display="none";
        childStyleIE.visibility="hidden";
    }
}