asked on

How to hide/display text box based on radio buttons

Hello there.

This is my problem: I have in an input form a radio button created within the same form, which captures for the app a value, based on wich there are textboxes which should be displayed/hidden. This proyect is coded in VB.NET behind a VS module with MS SQL Server db as BE.

ASKER CERTIFIED SOLUTION

Obadiah Christopher

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Kumaraswamy R

try

document.getElementById('controlid').style.display='block';

'controlid is ur textbox name in page (see in view source and give textbox name)

morehttp://forums.asp.net/t/1479133.aspx/1?javascript+to+hide+control+on+radio+button+click

Monica P

u can make use of javascript also to make this done

<input type="radio" class="yesRadio" onClick="showTextBox()"/>

<input type="text" class="textBox" hidden/>

Open in new window

use script

[b]  <script src="js/jquery-1.4.1.min.js" type="text/javascript"></script>[/b]
<script type="text/javascript>
function showTextBox() {
$(".textBox").show();
}
</script>

Open in new window

http://www.hscripts.com/tutorials/javascript/dom/radio-events.php

<script src="js/jquery-1.4.1.min.js" type="text/javascript"></script>
Do include the script file under js folder in your project., if dont have download from here
http://jquery.com/download/

or

u can use
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
Need Internet access for above URl

Alan Warren

You can use the asp:RadioButtonList OnSelectedIndexChanged event to loop through the controls in an asp:FormView, get a handle on the controls you want to toggle visibility for.

Here's a sample showing how to loop through all controls in the ReadOnly Template of an asp:FormView, setting visibility of certain TextBox controls based on the Text value of the selected RadioButtonList item:

<%@ Page Language="VB" %>

<!DOCTYPE html>

<script runat="server">

    Protected Sub RadioButtonList1_SelectedIndexChanged(sender As Object, e As EventArgs)
        Dim fv As FormView = Nothing
        Dim tb As TextBox = Nothing
       If TypeOf sender.namingcontainer Is FormView Then
            fv = sender.namingcontainer
            If fv.CurrentMode = FormViewMode.ReadOnly Then
                
                For Each t As Table In fv.Controls
                    For Each r As TableRow In t.Rows
                        For Each c As TableCell In r.Cells
                            For Each ctl As Control In c.Controls
                                If TypeOf ctl Is TextBox Then
                                    If ctl.ID.Contains(sender.Text) Then
                                        ctl.Visible = True
                                        tb = ctl
                                        tb.Text = ctl.ID.ToString
                                    Else
                                        ctl.Visible = False
                                    End If
                                End If
                            Next
                        Next
                    Next
                Next
            End If
        End If

    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:FormView ID="FormView1" runat="server" DataSourceID="SqlDataSource1">
            <ItemTemplate>
                ID:
                <asp:Label ID="IDLabel" runat="server" Text='<%# Eval("ID")%>' />
                <br />
                <asp:RadioButtonList ID="RadioButtonList1" runat="server" AutoPostBack="True"  OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged">
                    <asp:ListItem>Group1</asp:ListItem>
                    <asp:ListItem>Group2</asp:ListItem>
                </asp:RadioButtonList>
                <br />
                <br />
                <!-- Group1 controls -->
                <asp:TextBox ID="TextBox1_Group1" runat="server" Visible="false" BackColor="LemonChiffon" />
                <asp:TextBox ID="TextBox2_Group1" runat="server" Visible="false" BackColor="LemonChiffon" />
                <!-- Group2 controls -->
                <asp:TextBox ID="TextBox1_Group2" runat="server" Visible="false" BackColor="LemonChiffon" />
                <asp:TextBox ID="TextBox2_Group2" runat="server" Visible="false" BackColor="LemonChiffon" />
            </ItemTemplate>
        </asp:FormView>

        <asp:SqlDataSource ID="SqlDataSource1" runat="server" SelectCommand="select 1 as ID union all select 2 union all select 3" ConnectionString="<%$ ConnectionStrings:cnAkoJo %>"></asp:SqlDataSource>
    </div>
    </form>
</body>
</html>

Open in new window

Alan