Question

In my aspx page I have a tr which is set visible="false" by default. But on a selected index of a dropdown I make it visible="true". On the form submit I am validating the control within the tr but couldn’t find whether the tr is visible or not using JavaScript.

My aspx:

<tr id="MeasurementTr" runat="server" visible="false">
    <td>
        &nbsp;</td>
    <td class="table_label">
        Measurement</td>
    <td>
        &nbsp;</td>
    <td>
        <asp:DropDownList ID="DlMeasurement" runat="server">
        </asp:DropDownList>
    </td>
    <td>
        &nbsp;</td>
</tr>

and my JavaScript code,

 alert(document.getElementById("ctl00_ContentPlaceHolder1_MeasurementTr").style.visibility);
 if (document.getElementById("ctl00_ContentPlaceHolder1_MeasurementTr").style.visibility=="visible"){
     if (document.getElementById("ctl00_ContentPlaceHolder1_DlMeasurement").selectedIndex == 0) {
         document.getElementById("ctl00_ContentPlaceHolder1_ErrorMsg").innerHTML = "Please Select Your Measurement";
         document.getElementById("ctl00_ContentPlaceHolder1_DlMeasurement").focus();
         return false;
     }
 }

But my alert shows nothing. It didn’t show null or undefined.

Answer 1

The visible property of asp.net does not alter the CSS visibility property.. when it is true, asp.net will not render the element at all on the client side, so you cannot access it..

Use a class with visibility:hidden display:none instead..

[udpate]

changed the suggestion to display:none after cheeso’s comment, since visibility:hidden will retain the space the element occupies, while the display:none takes no space in the rendered page.. it is, most likely, what you need …