• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 575
  • Last Modified:

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

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.  
ss.jpg
0
bchadez
Asked:
bchadez
  • 3
1 Solution
 
pchela733Commented:
Answer for C#:

YouTextFieldName.Visible = true;
or YouTextFieldName.Visible = false;
0
 
bchadezAuthor Commented:
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.
0
 
bchadezAuthor Commented:
Ok I have figured it out.

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

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();");
    }
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat='server'>

0
 
bchadezAuthor Commented:
One more thing I forgot.

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

                <td>
                    <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>      
                </td>
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now