document.getElementById working for one form element but not another
<p>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.</p>

<p>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.</p>

<p>The page is laid out as following:</p>

<pre><code>&lt;asp:TextBox ID="txtCode1" onkeyup="Next()" runat="server" Width="45"    MaxLength="4"/&gt;
&lt;asp:TextBox ID="txtCode2" runat="server" Width="70" MaxLength="6"/&gt;
</code></pre>

<p>I'm using the following Javascript :</p>

<pre><code>function Next() 
{
    var control1 = document.getElementById('&lt;%= txtCode1.ClientID %&gt;');
    var control2;

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

<p>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 <code>txtCode1</code> and get the length but when the length hits 4 chars and it has to populate <code>control2</code> with the <code>getElementById()</code> call it sets control2 as undefined and then the control2.Focus() call throws an error.</p>

<p>I don't understand how the code for getting control1 and control2 is the same but this doesn't work, what am I missing?</p>
