I'm currently working on a webpage that requires a 10-digit code to be split between two textboxes, with 4 characters in the first textbox and 6 characters in the second.
My goal is to use Javascript to make the cursor automatically jump to the second textbox once the fourth character is entered into the first textbox.
The layout of the page is structured like this:
<asp:TextBox ID="txtCode1" onkeyup="Next()" runat="server" Width="45" MaxLength="4"/>
<asp:TextBox ID="txtCode2" runat="server" Width="70" MaxLength="6"/>
Here's the Javascript code I'm using:
function Next()
{
var control1 = document.getElementById('<%= txtCode1.ClientID %>');
var control2;
if (control1.value.length == 3)
{
control2 = document.getElementById['<%= txtCode2.ClientID %>'];
control2.Focus();
}
}
However, I've encountered an issue where the function doesn't seem to recognize the second textbox. It successfully locates txtCode1 and retrieves its length, but when it comes to populating control2 with the getElementById() call, it sets control2 as undefined. As a result, the subsequent call to control2.Focus() throws an error.
I find myself puzzled by the fact that the code for obtaining control1 and control2 seems identical, yet the functionality fails. Can anyone point out what I might be overlooking?