javascript field help

[rcatal01]

Hello,

I have a requirement to have three text fields ssn1, ssn2, ssn3.

these fields need to automatically go to the next field after three numbers are entered.

for example if i enter 123 into text field ssn1, i want the focus to be on ssn2 field, without tabbing. Is there a way to do this?

Thanks in advance.

[Brandoe85]

Sure is.
Check the length if your fields, and when they have reached the amount you want, send the focus() to the next text box...
There are plenty of scripts online that will help you if you do a google...

[rcatal01]

Well yes, I knew that much, but thanks for your help. My problem was getting to the point where i could check the length. I found the answer to this problem however at this helpful tutorial.

http://www.htmlcodetutorial.com/form...msupp_162.html

if this link is down, the code is here

*******************************************************

<SCRIPT TYPE="text/javascript">
<!--
var downStrokeField;
function autojump(fieldName,nextFieldName,fakeMaxLength)
{
var myForm=document.forms[document.forms.length - 1];
var myField=myForm.elements[fieldName];
myField.nextField=myForm.elements[nextFieldName];

if (myField.maxLength == null)
myField.maxLength=fakeMaxLength;

myField.onkeydown=autojump_keyDown;
myField.onkeyup=autojump_keyUp;
}

function autojump_keyDown()
{
this.beforeLength=this.value.length;
downStrokeField=this;
}

function autojump_keyUp()
{
if (
(this == downStrokeField) &&
(this.value.length > this.beforeLength) &&
(this.value.length >= this.maxLength)
)
this.nextField.focus();
downStrokeField=null;
}
//-->
</SCRIPT>


******************************************************

<FORM ACTION="../cgi-bin/mycgi.pl" METHOD=POST>

SSN:
<INPUT TYPE=TEXT NAME="ssn_1" MAXLENGTH=3 SIZE=3> -
<INPUT TYPE=TEXT NAME="ssn_2" MAXLENGTH=2 SIZE=2> -
<INPUT TYPE=TEXT NAME="ssn_3" MAXLENGTH=4 SIZE=4><BR>

email: <INPUT TYPE=TEXT NAME="email"><BR>

</FORM>

********************************************************

<SCRIPT TYPE="text/javascript">
<!--
autojump('ssn_1', 'ssn_2', 3);
autojump('ssn_2', 'ssn_3', 2);
autojump('ssn_3', 'email', 4);
//-->
</SCRIPT>


This tutorial was very helpful. I must give all credit to the found at htmlcodetutorial.com