Making a table row visible/invisible using javascript

Hello,

Iam a novice in Javascript and struggling to achieve the following.

I have a repeater control inside which I have a table structure as follows

<asp:Repeater ID="rptQuestions" runat="server"  onitemdatabound="rptQuestions_ItemDataBound">
         <ItemTemplate>
            <table>
            <tr>
               <td>
                   <table>
                        <tr>
                            <td><asp:Label ID="PrimaryQuestion" runat="server"></asp:Label></td>
                        </tr>                
                        <tr>
                            <td>
                                <asp:PlaceHolder runat="server" ID="PrimaryAnswerPholder" ></asp:PlaceHolder>
                            </td>
                        </tr>
                   </table>  
               </td>              
            </tr>
            <tr id="DependentQuestionAndAnswerRow" runat="server" visible="false">
                <td>
                    <asp:PlaceHolder  runat="server" ID="DependentQuestionAndAnswerPholder" ></asp:PlaceHolder>                
                </td>
            </tr>
            </table>          
           
        </ItemTemplate>
       </asp:Repeater>    

As you can see ... I have i will be displaying a primary question and in the "PrimaryAnswerPholder" I will add a radio buttonlist in the place holder in code behind ..

Now when I add a radiobutton list control to the "PrimaryAnswerPholder" place holder, I will display two choices .. say suppose the two choices are "Yes" and "No".

Only when the user clicks on the "Yes" option in the radio button list should i display the row "DependentQuestionAndAnswerRow" which is till now invisible(on page load) using javascript.

Now the problem iam facing is ...

 On click of the "Yes" radio button, I pass the Client Id of the  "DependentQuestionAndAnswerRow" from code behind to a javascript function to make it visible , but   document.getElementById(DependentQuestionRowId) returns a null as the "DependentQuestionAndAnswerRow" is set to invisible in the very begining itself i.e on page load. and the javascript is not able to find the element.

Is there a way I could make this work.  I will be displaying a list of  Primary questions with radio button list as their answers, if the user selects only the "Yes option"  I will have to display the dependent question. Is it possible to accomplish this using javascript ???

Hoping for some help.

Thanks,
Ash










Start Free Trial