Auto Tab Form Field

Enter your 10-digit phone number:
*

* Reset button not part of the script.
We added it just as a convenience for you.
This script "auto tabs" a form field (and jumps to another field) once the length of the field's value has exceeded a certain length. It works in conjunction with the "maxlength" attribute of HTML, triggered whenever the user's input reaches the maxlength's value. Make certain types of form fields more intuitive and convenient to fill out with this script.

We have tested the code in IE 8.0, Firefox3.5.5, Opera 10.20, Netscape 9.0.0.6, Flock2.52 and Safari Public Beta 4(528.16). This script worked well in all platforms with no variations observed.

For your Information: Before we begin, we feel obligated to advise you that the above form is for all intensive purposes a "Stand Alone" script. In other words, it really does not do much of anything other than what you see. In order to make it function as designed, you need to incorporate it into a valid working form. If you do not have a good Solid Knowledge of HTML coding, javascripts, forms and reconfigurations, please "Do Not Attempt" this until you are Proficient in the aforementioned areas.

Depending on your knowledge of HTML and javascripts, this is an easy one (1) part copy and paste code with minimal reconfigurations. Just incorporate the code anywhere within the <BODY> section of a working form you want it to appear. See below where and howto make the reconfigurations if you would like to adapt this script for different form fields use this effect.

<form name="sampleform">
<input type="text" name="first" size=4 onKeyup="autotab(this, document.sampleform.second)" maxlength=3>
<input type="text" name="second" size=4 onKeyup="autotab(this, document.sampleform.third)" maxlength=3>
<input type="text" name="third" size=5 maxlength=4>
</form>

Define Reconfigurations

size=4 ---- This defines the size of the textarea.

maxlength=3 --- This defines how many characters are allowed within the textarea.

In reference to the reconfigurations of the size of the textarea, a good rule of thumb when dealing with phone numbers, social security numbers, etc., always make the size one (1) digit larger than the number you are allowing in each field. In other words, if the box you have is allowing maxlength=3 numbers, then make the size=4.

If you notice in the above code the onKeyup="autotab(this, document.sampleform.third)" is missing from the third section. Reason being is quite simple. there are no more sections for the tab to jump to. If you need another textarea added into the code, then you would add the snipplet of code as needed and follow the numerical sequence.

We hope our tutorial was easy to follow and we covered everything in detail. If you would like to add this effect into your pages, grab the respective below link and you are there. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Get Code Here ] [ Rate This Page ] [ Scripts In Conflict ]