focus on textbox when panel is visible

Reply

scala_1988

Member

35 Points

focus on textbox when panel is visible

Mar 14, 2017 06:45 AM|scala_1988|LINK

I've two asp panels. One panel panel_srch_passenger is visible on page load and another panel panel_post_passCode is only visible after the button is pressed. Initially on page load txtPassengerId is set visible which is inside panel_srch_passenger. But after the button pressed I need to focus on different text box which is inside the panel_post_passCode.

How can I do this using javascript? My code is not working. Please help me.

<script type="text/javascript">        
        $(function () {
            document.getElementById('<%=txtPassengerId.ClientID%>').focus();
            if (document.getElementById("panel_post_passCode").style.visibility = "visible")
            {
                alert("test");
                document.getElementById('<%=txtpassCode.ClientID%>').focus();
            }
            
        });
		
<asp:Panel ID="panel_srch_passenger" runat="server" DefaultButton="btn_search">
        <fieldset>
            <legend>Search</legend>
            <div class="div_labels">
                <b>Patient Id :</b>
                <asp:TextBox ID="txtPassengerId" runat="server" />
                <asp:Button ID="btn_search" runat="server" Text="Search" OnClick="btn_search_Click" />
            </div>
        </fieldset>
    </asp:Panel>
	
<asp:Panel ID="panel_post_passCode" runat="server" Visible="false">
         <div class="give_labels">
                <b>Passenger Code :</b>
                <asp:TextBox ID="txtpassCode" runat="server" />
            </div>
    </asp:Panel>

Reply

raju dasa

All-Star

15176 Points

3888 Posts

Re: focus on textbox when panel is visible

Mar 14, 2017 08:14 AM|raju dasa|LINK

Hi,

scala_1988
But after the button pressed I need to focus on different text box which is inside the panel_post_passCode.

You don't need JS, you can set focus using asp.net (serverside) code

Call the txtpassCode.Focus() method in button click event handler

or check this site: http://stackoverflow.com/questions/1533871/how-to-use-setfocus-on-text-box-control

try updating code like this:

if ($("[id*='panel_post_passCode']").is(":visible"))
            {
                alert("test");
                document.getElementById('<%=txtpassCode.ClientID%>').focus();
            }

Happy Coding ! Mark as Answer if it helps.
rajudasa.blogspot.com || rajudasa-tech

Reply

kaushalparik...

All-Star

31352 Points

7055 Posts

Re: focus on textbox when panel is visible

Mar 14, 2017 08:50 AM|kaushalparik27|LINK

You code seems correct to me, try using Document.Ready event:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="../Scripts/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            document.getElementById('<%=txtPassengerId.ClientID%>').focus();
            if (document.getElementById("panel_post_passCode").style.visibility = "visible")
                document.getElementById('<%=txtpassCode.ClientID%>').focus();
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:Panel ID="panel_srch_passenger" runat="server" DefaultButton="btn_search">
            <fieldset>
                <legend>Search</legend>
                <div class="div_labels">
                    <b>Patient Id :</b>
                    <asp:TextBox ID="txtPassengerId" runat="server" />
                    <asp:Button ID="btn_search" runat="server" Text="Search" OnClick="btn_search_Click" />
                </div>
            </fieldset>
        </asp:Panel>

        <asp:Panel ID="panel_post_passCode" runat="server" Visible="false">
            <div class="give_labels">
                <b>Passenger Code :</b>
                <asp:TextBox ID="txtpassCode" runat="server" />
            </div>
        </asp:Panel>
    </form>
</body>
</html>

        protected void btn_search_Click(object sender, EventArgs e)
        {
            panel_post_passCode.Visible = true;
        }

Output:

In only jQuery, script code will be:

    <script type="text/javascript">
        $(document).ready(function () {
            $("#txtPassengerId").focus();
            if ($("#panel_post_passCode").is(":visible"))
                $("#txtpassCode").focus();
        });
    </script>

नमस्ते,
[KaushaL] Blog Twitter [MS MVP 2008 & 2009] [MCC 2011] [MVP Reconnect 2017]
Don't forget to click "Mark as Answer" on the post that helped you

Reply

scala_1988

Member

35 Points

144 Posts

Re: focus on textbox when panel is visible

Mar 14, 2017 09:18 AM|scala_1988|LINK

Hi, @ raju dasa

Thanks for the reply. I want to do it using client side script not from code behind. Thank You!

Reply

raju dasa

All-Star

15176 Points

3888 Posts

Re: focus on textbox when panel is visible

Mar 14, 2017 09:37 AM|raju dasa|LINK

Hi,

scala_1988
Thanks for the reply. I want to do it using client side script not from code behind. Thank You!

Try this clientside script using pure JS, it will work irrespective of panel visible or not.

<script>
window.onload=function(){
	var ele = document.getElementById('<%=txtPassengerId.ClientID%>');
	if(ele) ele.focus();
	ele = document.getElementById('<%=txtpassCode.ClientID%>');
	if(ele) ele.focus();
};
</script>

Happy Coding ! Mark as Answer if it helps.
rajudasa.blogspot.com || rajudasa-tech

Reply

kaushalparik...

All-Star

31352 Points

7055 Posts

Re: focus on textbox when panel is visible

Mar 14, 2017 09:48 AM|kaushalparik27|LINK

scala_1988
I want to do it using client side script not from code behind.

Did you try client side script that I posted earlier? I saw it as working on my side. You may post if you see further issue or still not working.

नमस्ते,
[KaushaL] Blog Twitter [MS MVP 2008 & 2009] [MCC 2011] [MVP Reconnect 2017]
Don't forget to click "Mark as Answer" on the post that helped you

Reply

Cathy Zou

Star

8670 Points

2882 Posts

Re: focus on textbox when panel is visible

Mar 15, 2017 03:29 AM|Cathy Zou|LINK

Hi scala_1988,

Base on your description. I make an working example.

  <script type="text/javascript">
  window.onload=function(){
	var ele = document.getElementById('<%=txtPassengerId.ClientID%>');
          ele.focus();
	
};
        function SomeMethod() {     
           var ele = document.getElementById("panel_post_passCode");
           ele.style.display = "block";
           if (document.getElementById("panel_post_passCode").style.display == "block") {
                document.getElementById('<%=txtpassCode.ClientID%>').focus();               
            }
            return false;
        }
    </script>

<asp:Panel ID="panel_srch_passenger" runat="server">
        <fieldset>
            <legend>Search</legend>
            <div class="div_labels">
                <b>Patient Id :</b>
                <asp:TextBox ID="txtPassengerId" runat="server" />
                <asp:Button ID="btn_search" runat="server" Text="Search" OnClientClick="return SomeMethod();" />
            </div>
        </fieldset>
    </asp:Panel>
	
<asp:Panel ID="panel_post_passCode" runat="server"  style="display:none;">
         <div class="give_labels">
                <b>Passenger Code :</b>
                <asp:TextBox ID="txtpassCode" runat="server" />
            </div>
    </asp:Panel>

Best regards

Cathy

MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

focus on textbox when panel is visibleRSS

6 replies

Shortcuts

focus on textbox when panel is visible

Re: focus on textbox when panel is visible

scala_1988

Re: focus on textbox when panel is visible

Re: focus on textbox when panel is visible

Re: focus on textbox when panel is visible

scala_1988

Re: focus on textbox when panel is visible

scala_1988

Re: focus on textbox when panel is visible