Help with enable/disable textbox if the radio button is selected/deselected

Question

SpottyBlue 0 Junior Poster in Training

11 Years Ago

I have problems with the enable/disable of textboxes if the radio button is selected/deselected.

Normally, if I select "Others" from the radio button group "Project List", the textbox is enabled. But if I select other than "Others", the textbox is not disabled.

This also happens on the radio button groups "e-mail type" and "e-mail diversion".

Connect the mdf file I've attached as a zip file, otherwise it won't work.
Created using VS 2013 Express for Web

AppRegister.aspx

<%@ Page Title="IT Application Form" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="AppRegister.aspx.cs" Inherits="IT_application_form_v3.AppRegister" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <h2>IT APPLICATION FORM</h2>

        <div class="form-horizontal">
            <div class="form-group">
            <asp:RadioButtonList ID="AppTypeList" runat="server" DataSourceID="SqlDataSource1" DataTextField="AppTypeName" DataValueField="AppTypeName" RepeatDirection="Horizontal" ValidationGroup="Register" Height="30px" Width="230px">
                <asp:ListItem>New</asp:ListItem>
                <asp:ListItem>Transfer</asp:ListItem>
                <asp:ListItem>Existing</asp:ListItem>
            </asp:RadioButtonList>
                <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:IT-app-v3-ConnectionString %>" SelectCommand="SELECT * FROM [AppType]"></asp:SqlDataSource>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator6" runat="server" ControlToValidate="AppTypeList" Display="Dynamic" ErrorMessage="Required" ForeColor="Red"></asp:RequiredFieldValidator>
            </div>

            <div class="form-group">
            <table style="width:100%;">
                <tr>
                    <td style="width: 196px; height: 40px">Applicant&#39;s Name (as per IC) :</td>
                    <td style="width: 217px; height: 40px">
                        <asp:TextBox ID="Name" runat="server" Height="35px" Width="200px" CssClass="form-control"></asp:TextBox>
                    </td>
                    <td style="width: 70px; height: 40px">
                        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" Display="Dynamic" ErrorMessage="Required" ForeColor="Red" ControlToValidate="Name"></asp:RequiredFieldValidator>
                    </td>
                    <td style="width: 100px; height: 40px">Office / Floor :</td>
                    <td style="width: 210px; height: 40px">
                        <asp:DropDownList ID="FloorList" runat="server" Height="35px" Width="200px" CssClass="form-control" ValidationGroup="Register" DataSourceID="SqlDataSource4" DataTextField="floor" DataValueField="floor">
                            <asp:ListItem>10</asp:ListItem>
                            <asp:ListItem>11</asp:ListItem>
                            <asp:ListItem>12</asp:ListItem>
                            <asp:ListItem>13</asp:ListItem>
                            <asp:ListItem>14</asp:ListItem>
                            <asp:ListItem>15</asp:ListItem>
                        </asp:DropDownList>
                        <asp:SqlDataSource ID="SqlDataSource4" runat="server" ConnectionString="<%$ ConnectionStrings:IT-app-v3-ConnectionString %>" SelectCommand="SELECT * FROM [Office-Floor]"></asp:SqlDataSource>
                    </td>
                    <td style="width: 70px; height: 40px">
                        <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" Display="Dynamic" ErrorMessage="Required" ForeColor="Red" ControlToValidate="FloorList"></asp:RequiredFieldValidator>
                    </td>
                </tr>
                <tr>
                    <td style="width: 196px; height: 40px;">Preferred Name :</td>
                    <td style="width: 217px; height: 40px;">
                        <asp:TextBox ID="preName" runat="server" Height="35px" Width="200px" CssClass="form-control" ValidationGroup="Register"></asp:TextBox>
                    </td>
                    <td style="width: 70px; height: 40px;">
                        <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" Display="Dynamic" ErrorMessage="Required" ForeColor="Red" ControlToValidate="preName"></asp:RequiredFieldValidator>
                    </td>
                    <td style="width: 100px; height: 40px;">Dept / Ext No. :</td>
                    <td style="width: 210px; height: 40px;">
                        <asp:DropDownList ID="DeptExtNo" runat="server" Height="35px" Width="200px" CssClass="form-control" ValidationGroup="Register">
                        </asp:DropDownList>
                    </td>
                    <td style="width: 70px; height: 40px;">
                        <asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" Display="Dynamic" ErrorMessage="Required" ForeColor="Red" ControlToValidate="DeptExtNo"></asp:RequiredFieldValidator>
                    </td>
                </tr>
                <tr>
                    <td style="width: 196px; height: 40px;">Designation :</td>
                    <td style="width: 217px">
                        <asp:TextBox ID="Designation" runat="server" Height="35px" Width="200px" CssClass="form-control" ValidationGroup="Register"></asp:TextBox>
                    </td>
                    <td style="width: 70px">
                        <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" Display="Dynamic" ErrorMessage="Required" ForeColor="Red" ControlToValidate="Designation"></asp:RequiredFieldValidator>
                    </td>
                    <td style="width: 100px">&nbsp;</td>
                    <td style="width: 210px">&nbsp;</td>
                    <td style="width: 70px">&nbsp;</td>
                </tr>
            </table>
            </div>

            <div class="form-group">
            <table style="width:84%;">
                <tr>
                    <td style="height: 22px; width: 410px;">
                        <asp:RadioButton ID="edtp" runat="server" Text="EDTP" GroupName="ProjectList" Width="75px" Checked="true"/>
                        <asp:RadioButton ID="kvmrt_ug" runat="server" Text="KVMRT (UG)" GroupName="ProjectList" Width="125px"/>
                        <asp:RadioButton ID="kvmrt_pdp" runat="server" Text="KVMRT (PDP)" GroupName="ProjectList" Width="125px"/>
                        <asp:RadioButton ID="others" runat="server" Text="Others: " GroupName="ProjectList" Width="80px" OnCheckedChanged="others_CheckedChanged" AutoPostBack="true" />
                    </td>
                    <td style="width: 255px;">
                        <asp:TextBox ID="otherProjectName" runat="server" Height="35px" Width="250px" CssClass="form-control" ValidationGroup="Register" Enabled="false"></asp:TextBox>
                    </td>
                    <td style="width: 255px;">
                        <asp:RequiredFieldValidator ID="RequiredFieldValidator11" runat="server" ControlToValidate="otherProjectName" Display="Dynamic" ErrorMessage="The other project name is required" ForeColor="Red"></asp:RequiredFieldValidator>
                    </td>
                </tr>
            </table>
            </div>
            <div class="form-group">

                <table style="width:82%;">
                    <tr>
                        <td style="width: 345px">
                            <asp:RadioButton ID="emailID" runat="server" GroupName="emailType" Text="E-mail ID" Width="100px" Checked="true"/>
                            <asp:RadioButton ID="emailGroup" runat="server" GroupName="emailType" Text="E-mail Group (Please specify):" Width="230px" OnCheckedChanged="emailGroup_CheckedChanged" AutoPostBack="true" />
                        </td>
                        <td style="width: 255px;">
                            <asp:TextBox ID="emailGroupName" runat="server" Height="35px" Width="250px" CssClass="form-control" Enabled="false"></asp:TextBox>
                        </td>
                        <td>
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator10" runat="server" Display="Dynamic" ErrorMessage="The e-mail group name is required" ForeColor="Red" ValidationGroup="Register" ControlToValidate="emailGroupName"></asp:RequiredFieldValidator>
                        </td>
                    </tr>
                </table>

            </div>
            <div class="form-group">


                E-mail Diversion:
                <asp:RadioButton ID="noEmailD" runat="server" Checked="True" GroupName="emailDiversion" Text="None" Width="65px" />
                <asp:RadioButton ID="M2G" runat="server" GroupName="emailDiversion" Text="MGJV to Gamuda" Width="150px" OnCheckedChanged="ED_CheckedChanged" AutoPostBack="true" />
                <asp:RadioButton ID="G2M" runat="server" GroupName="emailDiversion" Text="Gamuda to MGJV" Width="150px" OnCheckedChanged="ED_CheckedChanged" AutoPostBack="true" />


            </div>
            <div class="form-group">
                <table style="width:86%;">
                    <tr>
                        <td style="width: 371px">
                            <asp:Label ID="emailDiversionSpecify" runat="server" Text="Please specify your MGJV / Gamuda e-mail ID: "></asp:Label>
                        </td>
                        <td style="width: 265px">
                            <asp:TextBox ID="emailDiversionID" runat="server" Width="250px" CssClass="form-control" Height="35px" Enabled="false"></asp:TextBox>
                        </td>
                        <td style="width: 358px">
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator7" runat="server" ControlToValidate="emailDiversionID" Display="Dynamic" ErrorMessage="Required" ForeColor="Red" ValidationGroup="Register"></asp:RequiredFieldValidator>
                            <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="emailDiversionID" Display="Dynamic" ErrorMessage="Please enter a valid e-mail ID" ForeColor="Red" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" ValidationGroup="Register"></asp:RegularExpressionValidator>
                            <br />
                        </td>
                    </tr>
                </table>
            </div>
            <div class="form-group">
                <asp:CheckBox ID="intAccess" runat="server" Text="Internet Access" Width="150px" />
                <asp:CheckBox ID="NSF" runat="server" Text="Network Shared Folder" Width="200px" />
                <asp:CheckBox ID="LoanComp" runat="server" Text="Loan Computer" />
            </div>
            <div class="form-group">
                Remarks:<br />
            <asp:TextBox ID="Remarks" runat="server" Height="150px" Width="600px" CssClass="form-control"></asp:TextBox></div>
            <div class="form-group">
                &nbsp;</div>
            <div class="form-group">
                <asp:Button ID="submitButton" runat="server" Text="Submit" onclick="submitButton_Click" CssClass="btn btn-primary" ValidationGroup="Register"/>
            </div>
        </div>
</asp:Content>

AppRegister.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace IT_application_form_v3
{
    public partial class AppRegister : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {



        }



        protected void submitButton_Click(object sender, EventArgs e)
        {

        }


        protected void others_CheckedChanged(object sender, EventArgs e)
        {
            if (others.Checked == true)
            {
                otherProjectName.Enabled = true;
            }
            else
            {
                otherProjectName.Enabled = false;
            }
        }

        protected void emailGroup_CheckedChanged(object sender, EventArgs e)
        {
            if (emailGroup.Checked == true)
            {
                emailGroupName.Enabled = true;
            }
            else
            {
                emailGroupName.Enabled = false;
            }
        }

        protected void ED_CheckedChanged(object sender, EventArgs e)
        {
            if ((M2G.Checked == true) && (G2M.Checked == true))
            {
                emailDiversionID.Enabled = true;
            }
            else
            {
                emailDiversionID.Enabled = false;
            }
        }
    }
}

.net database-sql

This attachment is potentially unsafe to open. It may be an executable that is capable of making changes to your file system, or it may require specific software to open. Use caution and only open this attachment if you are comfortable working with zip files.

IT-app-v3_mdf.zip (420.06 KB)

Edited 11 Years Ago by SpottyBlue because: Remind them to use VS 2013

2 Contributors
2 Replies
2K Views
5 Days Discussion Span
Latest Post 11 Years Ago Latest Post by madCoder

Dani AI

Generated 11 Months Ago

the issue is that only the radio that enables a textbox is posting back and running server code. When you switch away (e.g., from Others to EDTP), nothing fires, so the textbox never gets disabled. The same pattern is in your e-mail type and diversion groups. As hinted, you either need a single place that always syncs UI state, or use a RadioButtonList so one event covers the whole group.

A simple server-side pattern is to centralize the toggle logic and call it from your handlers (and on page lifecycle):

private void SyncUi()
{
    otherProjectName.Enabled = others.Checked;
    emailGroupName.Enabled   = emailGroup.Checked;
    emailDiversionID.Enabled = M2G.Checked || G2M.Checked; // was &&, which can never be true in a group

    RequiredFieldValidator11.Enabled = otherProjectName.Enabled;
    RequiredFieldValidator10.Enabled = emailGroupName.Enabled;
    RequiredFieldValidator7.Enabled  = emailDiversionID.Enabled;
}

Wire every radio in each group to the same CheckedChanged handler (e.g., ProjectList_CheckedChanged, EmailType_CheckedChanged, EmailDiversion_CheckedChanged) and set AutoPostBack="true" on each radio, including the "None" option. Call SyncUi() from those handlers and once per request (e.g., in Page_Load or OnPreRender) so the UI is correct even if multiple events fire. Optional: set CausesValidation="false" on the radios so changing a choice does not trigger validators prematurely.

If you prefer fewer handlers, follow ’s suggestion: use a RadioButtonList for each group and handle SelectedIndexChanged once per group, then call the same SyncUi() method from there.

All 2 Replies

madCoder 17 Junior Poster

11 Years Ago

Many of your radio buttons do not have event handlers. You need an event handler for the "enable" and "disable" behaviors. The "checkchanged" event is fired by the control receiving the new selection (not when losing selection despite the event name implying this.)

I have found that the RadioButtonList control is easier to work with for these kinds of cases because the SelectedIndexChanged event becomes available. Using this event handler, you can manage behavior (toggling textboxes for example) all in one method instead requiring several. A downside to RadioButtonList is that you do lose some flexibility in placement/formatting.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

SpottyBlue 0 Junior Poster in Training · Answer 1 · 2015-01-09T06:34:04+00:00

SpottyBlue 0 Junior Poster in Training

11 Years Ago

Hello? I need help with this coding.

Help with enable/disable textbox if the radio button is selected/deselected

Dani AI

Recommended Answers Collapse Answers

All 2 Replies

Recommended Answers