Question

I have a web page that takes a 10 digit code which is split across two textboxes, 4-chars in the first textbox and 6 chars in the second.

I’ve been trying to implement some javascript so that when the user enters the fourth character in the first textbox the cursor jumps to the second textbox.

The page is laid out as following:

<asp:TextBox ID="txtCode1" onkeyup="Next()" runat="server" Width="45"    MaxLength="4"/>
<asp:TextBox ID="txtCode2" runat="server" Width="70" MaxLength="6"/>

I’m using the following Javascript :

function Next() 
{
    var control1 = document.getElementById('<%= txtCode1.ClientID %>');
    var control2;

    if (control1.value.length == 3) 
    {
         control2 = document.getElementById['<%= txtCode2.ClientID %>'];
         control2.Focus();
    }
}

My problem is that the function doesn’t recognise the second textbox. If I step through the Javascript has no problem is able to locate txtCode1 and get the length but when the length hits 4 chars and it has to populate control2 with the getElementById() call it sets control2 as undefined and then the control2.Focus() call throws an error.

I don’t understand how the code for getting control1 and control2 is the same but this doesn’t work, what am I missing?

Answer 1

getElementById is a function, not an array.

Use () not [].

Also, in JavaScript, DOM elements have a focus method, not a Focus method.

Corrected code:

control2 = document.getElementById('<%= txtCode2.ClientID %>');
control2.focus();