Auto-Tab between input boxes.

[MBK]

All,
I have a page that has 5 input boxes, each box can hold 4 characters. I need to find a way so that when a user enters the 4th char in the first box, then the cursor moves to the second box and so on...

Anyone have any idea how I can do this?

Thanks

[Hank]

Next time you can also use google...

this is the example you need I think:
http://www.mattkruse.com/javascript/autotab/

[MBK]

OK, I have seen this info.
How do I now include this in my php file?
Also I have another 3 fields, that have different lengths. field 1 is 4chars long, field 2 is 6char long, field 3 is 8 char long.

Someone please help me!

[Hank]

Have not tested it. You can make a form around it and pass the variables to php now.

<SCRIPT LANGUAGE="JavaScript">
// -------------------------------------------------------------------
// TabNext()
// Function to auto-tab phone field
// Arguments:
//   obj :  The input object (this)
//   event: Either 'up' or 'down' depending on the keypress event
//   len  : Max length of field - tab when input reaches this length
//   next_field: input object to get focus after this one
// -------------------------------------------------------------------
var phone_field_length=0;
function TabNext(obj,event,len,next_field) {
	if (event == "down") {
		phone_field_length=obj.value.length;
		}
	else if (event == "up") {
		if (obj.value.length != phone_field_length) {
			phone_field_length=obj.value.length;
			if (phone_field_length == len) {
				next_field.focus();
				}
			}
		}
	}
</SCRIPT>

<table>
<tr>
	<td>
	<input type=text name="name_1" size=4 maxlength=4 nKeyDown="TabNext(this,'down',4)" onKeyUp="TabNext(this,'up',4,this.form.name_2)">
	-
	<input type=text name="name_2" size=6 maxlength=6 onKeyDown="TabNext(this,'down',6)" onKeyUp="TabNext(this,'up',6,this.form.name_3)">
	-
	<input type=text name="name_3" size=8 maxlength=8>
	</td>
</tr>
</table>