lttrgt lttdgt ltspan class34formLabels34gt ltaspLabel runat34server34 ID34lblHasYear34 Text34Has Year34gtltaspLabelgt ltspangt lttdgt lttdgt ltaspRadioButtonList runat34server34 ID34rdbHasYear34

Please refer this codeHTMLlttable border34134 cellpadding34034 cellspacing34534 width3440034gt lttrgt lttd width343034gt Graduate lttdgt lttdgt ltaspRadioButtonList ID34rblGraduate34 runat34server34 onclick34ShowHidethis34gt ltaspListItem Text34Yes34 Value34Yes34 gt ltaspListItem Text34No34 Value34No34 gt ltaspRadioButtonListgt lttdgt lttrgt lttrgt lttdgt ltaspLabel ID34lblDegreeName34 Text34Degree Name34 runat34server34 Style34display none34 gt lttdgt lttdgt ltaspTextBox ID34txtDegreeName34 runat34server34 Style34display none34 gt lttdgt lttrgtlttablegtStyleltstyle type34textcss34gt bod

Hide Show TextBox or Panel on RadioButtonList (Checked) Selection using JavaScript in ASP.Net

Manoj280...

SOLVED CLOSED ACTIVE ANSWERED
User: Manoj2807
Posted: on May 15, 2014 02:55 AM
Forum: JavaScript
Answer: 1
Views: 10765

 <tr>
                            <td>
                                <span class="formLabels">
                                    <asp:Label runat="server" ID="lblHasYear" Text="Has Year"></asp:Label>
                                </span>
                            </td>
                            <td>
                                <asp:RadioButtonList runat="server" ID="rdbHasYear" 
                                    RepeatDirection="Horizontal" AutoPostBack="True">
                                    <asp:ListItem Value="0">Yes</asp:ListItem>
                                    <asp:ListItem Value="1">No</asp:ListItem>
                                </asp:RadioButtonList>
                            </td>
                        </tr>
                        <tr id="trNoofYear">
                            <td>
                                <span class="formLabels">
                                    <asp:Label runat="server" ID="lblNoOfYears" Text="No.of Year"></asp:Label>
                                </span>
                            </td>
                            <td>
                                <asp:TextBox ID="txtNoOfYears" runat="server" 
                                    CssClass="form-control Width_300px"></asp:TextBox>
                            </td>
                        </tr>

if rdbHasYear if checked to Yes then lblNoOfYears and txtNoofYears must visible true other wise Visible false using Javascript

plz help me

Azim

0 2

Reply
ANSWER
User: Azim
Replied: on May 16, 2014 03:08 AM
Report

Please refer this code

HTML

<table border="1" cellpadding="0" cellspacing="5" width="400">
    <tr>
        <td width="30%">
            Graduate
        </td>
        <td>
            <asp:RadioButtonList ID="rblGraduate" runat="server" onclick="ShowHide(this)">
                <asp:ListItem Text="Yes" Value="Yes" />
                <asp:ListItem Text="No" Value="No" />
            </asp:RadioButtonList>
        </td>
    </tr>
    <tr>
        <td>
            <asp:Label ID="lblDegreeName" Text="Degree Name" runat="server" Style="display: none;" />
        </td>
        <td>
            <asp:TextBox ID="txtDegreeName" runat="server" Style="display: none;" />
        </td>
    </tr>
</table>

Style

<style type="text/css">
    body
    {
        font-family: Arial;
        font-size: 10pt;
    }
    td
    {
        border: 0;
    }
</style>

Script

<script type="text/javascript">
    function ShowHide(table) {
        var radioButton = table.getElementsByTagName('input');
        for (var i = 0; i < radioButton.length; i++) {
            if (radioButton[i].checked) {
                document.getElementById("<%=lblDegreeName.ClientID %>").style.display = radioButton[i].value == "Yes" ? "block" : "none";
                document.getElementById("<%=txtDegreeName.ClientID %>").style.display = radioButton[i].value == "Yes" ? "block" : "none";
            }
        }
    }
</script>

Screenshot

Hide Show TextBox or Panel on RadioButtonList (Checked) Selection using JavaScript in ASP.Net

Company

Explore

Follow us

Contact Us