Show hide TextBox based on RadioButtonList selection in ASP.Net

Last Reply 5 months ago By pandeyism

Posted 5 months ago

hello,

i used this javascript on radiobutton change event it works. the problem is when i recall the value of radiobutton list from database on page behind so if default value is not specific in radiobutton it does not show the textbox11, so the script should work on window load as well so if by default value of radiobutton is not specific script should fire

<script type="text/javascript" >
    $("document").ready(function () {
        $("#<%= RadioButtonList2.ClientID%> input").change(function () {
            if ($(this).val() == 'Specific') {
                $('#<%= TextBox11.ClientID%>').hide();
                document.getElementById("<%=TextBox3.ClientID %>").disabled = false;
        }
        else {
            $('#<%= TextBox11.ClientID%>').show();
                <%--document.getElementById('<%=txtData.ClientID%>').value = "I am selected";--%>

                document.getElementById("<%=TextBox3.ClientID %>").disabled = true;

                document.getElementById("<%=TextBox3.ClientID %>").value = "0";
        }
            return false;
        });
    });
</script>

 

Posted 5 months ago Modified on 5 months ago

Hi nauna,

Please refer below sample code.

Also refer below link-

Get Selected Text and Value of ASP.Net RadioButtonList using jQuery

HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        TextBoxShowHide();
        $("#RadioButtonList2 [type=radio]").change(function () {
            TextBoxShowHide();
        });
    });
    function TextBoxShowHide() {
        var val = $('#RadioButtonList2 input[type=radio]:checked').val();
        if (val == '1' || $('#RadioButtonList2 input[type=radio]:checked').length == 0) {
            $('#<%= TextBox11.ClientID%>').hide();
            document.getElementById("<%=TextBox3.ClientID %>").disabled = false;
            document.getElementById("<%=TextBox3.ClientID %>").value = "";
        }
        else {
            $('#<%= TextBox11.ClientID%>').show();
            document.getElementById("<%=TextBox3.ClientID %>").disabled = true;
            document.getElementById("<%=TextBox3.ClientID %>").value = "0";
        }
    }
</script>
<div>
    <asp:TextBox ID="TextBox11" runat="server" placeholder="Textbox 11"></asp:TextBox>
    <asp:TextBox ID="TextBox3" runat="server" placeholder="Textbox 3"></asp:TextBox>
    <asp:RadioButtonList ID="RadioButtonList2" runat="server">
    </asp:RadioButtonList>
</div>

Namespaces

C#

using System.Data;
using System.Configuration;
using System.Data.SqlClient;

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        string constr = ConfigurationManager.ConnectionStrings["Constring"].ConnectionString;
        using (SqlConnection con = new SqlConnection(constr))
        {
            string query = "SELECT FruitName, FruitId FROM Fruits";
            using (SqlCommand cmd = new SqlCommand(query))
            {
                cmd.CommandType = CommandType.Text;
                cmd.Connection = con;
                con.Open();
                RadioButtonList2.DataSource = cmd.ExecuteReader();
                RadioButtonList2.DataTextField = "FruitName";
                RadioButtonList2.DataValueField = "FruitId";
                RadioButtonList2.DataBind();
                con.Close();
            }
        }
    }
}

Screenshot