Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 594
  • Last Modified:

Web Form: Automatically move the focus to next control

VB.NET
Web Forms

Part of my web form contains three textbox server controls into which the user enters a U.S. telephone number. The first textbox is for the 3-digit area code (tbAreaCode), the second textbox holds the 3-digit exchange (tbExchange), and the third textbox holds the last 4 digits of the phone number (tbNumber).  So the three controls on the form are arranged to look something like this:

Phone Number:   ( _ _ _ ) _ _ _ - _ _ _ _


I have set the MaxLength for each text box to either 3 or 4 to limit input to the appropriate number of digits. Once they type the last digit in a text box I want the focus to immediately move to the next textbox in the tab order.

I cannot find any method that looks like SetFocus or MoveNext. How do I do it? (If it requires JavaScript, please give me a complete answer as I do not know Javascript.)
0
rgrimm
Asked:
rgrimm
  • 2
1 Solution
 
David H.H.LeeCommented:
rgrimm,

Try this, use onKeyUp JS function to get it work.:

<%@ Page Language="vb" %>
<script runat="server">
    Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs)
        'Put user code to initialize the page here
        'register javascript event
        txt1.Attributes.Add("onkeyup", "javascript:tabNext('txt1','txt2')")
        txt2.Attributes.Add("onkeyup", "javascript:tabNext('txt2','txt3')")
    End Sub
</script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
      <HEAD>
            <title>tab</title>
            <meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
            <meta name="CODE_LANGUAGE" content="Visual Basic .NET 7.1">
            <meta name="vs_defaultClientScript" content="JavaScript">
            <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
            <script language="javascript">
            function tabNext(obj,objNext)
            {
                  if((document.getElementById(obj).value).length==3)
                  {
                        document.getElementById(objNext).focus();
                        document.getElementById(objNext).select();
                  }
                  
            }
            </script>
      </HEAD>
      <body MS_POSITIONING="GridLayout">
            <form id="frmSubmit" method="post" runat="server">
                  Phone Number :
                  <asp:textbox id="txt1" runat="server" maxlength="3" columns="3"/>
                  -<asp:textbox id="txt2" runat="server" maxlength="3" columns="3"/>
                  -<asp:textbox id="txt3" runat="server" maxlength="4" columns="4"/>
            </form>
      </body>
</HTML>

Regards
x_com
0
 
rgrimmAuthor Commented:
x_com,

Excellent! It worked great the first time. Thank you very much for taking the time to help me with this. I greatly appreciate it.

Sincerely,

Rick
0
 
David H.H.LeeCommented:
Glad to help, rgrimm.

Regards
x_com
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

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