Firefox/IE IIS 6 Not Supporting Hiding Lables in Javascript/HTML

Question

I have some code that works on my IIS 5.1 dev box, but not on our IIS 6 production server OR in Firefox. I'm hoping to find some code that will accomidate both our production server and Firefox.

Here's what's happening:

I have a label that should initially display as hidden. I basically use this label to hide the entire row.

             <label for="lbCloseDate" id="lbCloseDate" style="display:none">
          <tr>
            <td bordercolor="#f0f0e4" bgcolor="#f0f0e4"><h3>Close Date</h3></td>
          </tr>
          </label>

Then, i use this javascript to unhide it, based on the value of a combo box:

    function statusShowHide()
{
    var cboStatus = document.getElementById('cboStatus');
    var lbCloseDate = document.getElementById('lbCloseDate'); 

    if cboStatus = 'Closed') 
    {
        lbCloseDate.style.display = "";
    }
}

Basically, what's happening in Firefox and our prod server is that the label/row doesn't hide. I don't have an error; it's just not getting hidden like I want.

I don't need to use a label to hide the row...it's just the only way I knew how. So, if something is more preferable that accomplishes the same goal, I'm open to it. Thanks!

Answer 1

your missing a ( here also == for comparing, single = for assigning.

if (cboStatus == 'Closed') 
    {
        lbCloseDate.style.display = "";
    }

is it getting into this block? if so, i'd recomend changeing the .display = ""; to .display = "none"

you can also just give your tr an ID, and use that to hide/show the row instead of the label. will be more syntactically correct.

EDIT:

Here's a fiddle with a working example: http://jsfiddle.net/2FDPg/

Here's the basics:

function showOrHideRow(){
    var theRow = document.getElementById('closeRow');
    var theDropDown = document.getElementById('ChangeMe');

    var theVal = theDropDown.options[theDropDown.selectedIndex].value;

    if(theVal == 'Closed'){
         theRow.style.display = 'none';   
    }
    else{
        theRow.style.display = 'block';
    }

}

and the html:

<table>
    <tr id="closeRow">

        <td>Close Date:</td>  
    </tr>
    <tr>
        <td>another row</td>
    </tr>

</table>

<select id="ChangeMe" onChange="showOrHideRow()">
    <option value="">Change me</option>
    <option value="Closed">Hide It</option>
    <option value="Open">Don't Hide It</option>
</select>