Set a label to visible when a particular DetailsView field has focus.

Posted on 2009-12-22
Last Modified: 2013-11-26
I have a page containg a DetailsView and a label.  I need to figure out a way to make different labels visable depending on which DetailsView field has focus.  The goal is to give detailed instruction on each field as the are selected for entry.  
Question by:bchadez
    LVL 3

    Expert Comment

    Answer for C#:

    YouTextFieldName.Visible = true;
    or YouTextFieldName.Visible = false;

    Author Comment

    By default I want to set Label1.Visible=false.  Then when I place the cursor in lets say the Inc_StreeAddress textbox field of my DetailsView, Label1 will become visible.  If I move the cursor to the next field, lets say Inc_City, then I want Lable1 to no longer be visable and a new label to become visable and so on for each textbox.

    Accepted Solution

    Ok I have figured it out.

    I placed a script manager on my .aspx page:
    <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" >

    I created a javascript file "JScript.js" with the following code to control the visibility of my lables:
    //Street Label
    function dispStreetLbl() {
        document.getElementById('StreetLbl').style.display = 'block';
    function hideStreetLbl() {
        document.getElementById('StreetLbl').style.display = 'none';

    //City Label
    function dispCityLbl() {
        document.getElementById('CityLbl').style.display = 'block';
    function hideCityLbl() {
        document.getElementById('CityLbl').style.display = 'none';

    //State Label
    function dispStateLbl() {
        document.getElementById('StateLbl').style.display = 'block';
    function hideStateLbl() {
        document.getElementById('StateLbl').style.display = 'none';

    //Zip Label
    function dispZipLbl() {
        document.getElementById('ZipLbl').style.display = 'block';
    function hideZipLbl() {
        document.getElementById('ZipLbl').style.display = 'none';

    I referenced the javascript file on my .aspx page:
    <script src="JScript.js" type="text/javascript"></script>

    I placed a script on my .aspx page above the <head> to capture the textboxs inside the DetailsView and fire off functions in my javascript file:
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
            //Street TextBox
            TextBox Street = (TextBox) DetailsView2.FindControl("Street");
            Street.Attributes.Add("onfocus", "dispStreetLbl();");
            Street.Attributes.Add("onblur", "hideStreetLbl();");

            //City TextBox
            TextBox City = (TextBox)DetailsView2.FindControl("City");
            City.Attributes.Add("onfocus", "dispCityLbl();");
            City.Attributes.Add("onblur", "hideCityLbl();");

            //State TextBox
            TextBox State = (TextBox)DetailsView2.FindControl("State");
            State.Attributes.Add("onfocus", "dispStateLbl();");
            State.Attributes.Add("onblur", "hideStateLbl();");

            //Zip TextBox
            TextBox Zip = (TextBox)DetailsView2.FindControl("Zip");
            Zip.Attributes.Add("onfocus", "dispZipLbl();");
            Zip.Attributes.Add("onblur", "hideZipLbl();");
    <html xmlns="">
    <head runat='server'>


    Author Comment

    One more thing I forgot.

    Created lables with style="display: none;":

                        <asp:Label ID="StreetLbl" runat="server"
                            Text="Enter the street."
                            style="display: none;" Height="200px" Width="300px"></asp:Label>      
                        <asp:Label ID="CityLbl" runat="server"
                            Text="Enter the city."
                            style="display: none;" Height="200px" Width="300px"></asp:Label>      
                        <asp:Label ID="StateLbl" runat="server"
                            Text="Enter the state."
                            style="display: none;" Height="200px" Width="300px"></asp:Label>  
                         <asp:Label ID="ZipLbl" runat="server"
                            Text="Enter the zip code."
                            style="display: none;" Height="200px" Width="300px"></asp:Label>      

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    IT, Stop Being Called Into Every Meeting

    Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

    Suggested Solutions

    In my previous article ( we saw the basics of serialization and how types/objects can be serialized to Binary format. In this blog we wi…
    Entity Framework is a powerful tool to help you interact with the DataBase but still doesn't help much when we have a Stored Procedure that returns more than one resultset. The solution takes some of out-of-the-box thinking; read on!
    To add imagery to an HTML email signature, you have two options available to you. You can either add a logo/image by embedding it directly into the signature or hosting it externally and linking to it. The vast majority of email clients display l…
    Sending a Secure fax is easy with eFax Corporate ( First, Just open a new email message.  In the To field, type your recipient's fax number You can even send a secure international fax — just include t…

    759 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    12 Experts available now in Live!

    Get 1:1 Help Now