Auto Tab JavaScript Coding for Phone Numbers and Social Security Number in the same web form

Hi Everyone,

I have the following JavaScript Code for a SSN1, SSN2, and SSN3 separate textboxes in a web form.  I will also have three separate phone numbers too with three separate textboxes for each.

HomePhone1, HomePhone2, and HomePhone3
MobilePhone1, MobilePhone2, and MobilePhone3
OtherPhone1, OtherPhone2, and OtherPhone3

I have used the same code above and changed the names for SSN1, SSN2, and SSN3,

The SSN1, SSN2, and SSN3 code works fine.  One can enter the first three number and the cursor tabs to the SSN2, and after entering SSN2, the cursor tabs to SSN3.  After SSN3 is entered it tabs to the next field after Tab is selected.

The Phone Number code works fine for HomePhone1 and HomePhone2, but when I select the Tab key after Homephone3 Javascript is not working correctly and the tab does not work with tab key selected.  In fact it tabs to another line on another textbox on another line.

The PhoneNumbers are all in the tame table line.  HomePhone1, HomePhone2, and HomePhone3.  The cursor does not move to the MobilePhone2 after tab is selected after the HomepHone3 is entered and tab is selected.  I do not know whats wrong.

The JavaScript Coding:
<script type="text/javascript" language="javascript">
$(function () {
var $SSN1_ch = $("input[id*='SSN1_ch']");
var $SSN2_ch = $("input[id*='SSN2_ch']");
var $SSN3_ch = $("input[id*='SSN3_ch']");

$SSN1_ch.keyup(function (e) {
if ($(this).val().length == parseInt($(this).attr("maxlength"))) {
$SSN2_ch.focus();
}
}).bind('keypress', function (e) {
if ((e.keyCode ? e.keyCode : e.which) == "13") {
$SSN2_ch.focus();
e.preventDefault();
}
});
$SSN2_ch.keyup(function (e) {

if ($(this).val().length == parseInt($(this).attr("maxlength"))) {
$SSN3_ch.focus();
}
}).bind('keypress', function (e) {
if ((e.keyCode ? e.keyCode : e.which) == "13") {
$SSN3_ch.focus();
e.preventDefault();
}
});
$SSN3_ch.keyup(function (e) {
if ($(this).val().length == parseInt($(this).attr("maxlength"))) {
$(this).nextAll('input:first').focus();
}
}).bind('keypress', function (e) {
if ((e.keyCode ? e.keyCode : e.which) == "13") {
$(this).nextAll('input:first').focus();
e.preventDefault();
}
});

});
</script>

     Also, does the coding for each phone number need to be in its own separate area in each script type?
   <script type="text/javascript" language="javascript">
HomePhone1
HOmePhone2
Homephone3
</script>



<script type="text/javascript" language="javascript">
MobilePhone1
MobilePhone2
Mobilephone3
</script>

<script type="text/javascript" language="javascript">
OtherPhone1
OtherPhone2
Otherphone3
</script>
jjc9809Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

nishant joshiTechnology Development ConsultantCommented:
can you able to give your html also?
basicinstinctCommented:
you need zero lines of javascript for this. the browser will give the fields a native tabindex so when the user presses tab focus will automatically go to the next field if they are all siblings.

you can also set the tabindex yourself, but in your case you shouldn't need to.

e.g.
<input type="text" id="SSN1_ch" tabindex="1"/>
<input type="text" id="SSN2_ch" tabindex="1"/>
<input type="text" id="SSN3_ch" tabindex="1"/>

http://www.htmlcodetutorial.com/forms/_INPUT_TABINDEX.html
jjc9809Author Commented:
BasicInstinct,

I know I can set the tab index for each field to tab to each textbox and drop down box, but my user wants the computer to auto tab on the SSN and Phone Numbers.  In other words, when the first three numbers are entered in SSN1, the computer should autotab to the SSN2 field automatically without the user selecting the tab key.  After the SSN3 field is entered, the computer should autotab to the next textbox field that is not a phone number or ssn.  Now, I will have tab index set for all fields and the user will need to tab to these fields that are not social security number fields or phone number fields by normally selecting the tab key.  Does this make sense?
Become a Certified Penetration Testing Engineer

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

basicinstinctCommented:
ok i get it
well you have each of these groups of fields in a fieldset (because you are building a semantically correct and accessible form)

hook up the function below to each of your fieldsets


function autotab(e){
    var element = e.target;
    if(element.value.length == element.maxLength)
    {
         while((element = element.nextSibling))
         {
            if(element.tabIndex >= 0)
            {
                element.focus();
                break;
            }
         }
    }
    }



For example if you have this:

<fieldset id="ssn">
    <legend>Social Security Number</legend>
    <label for="SSN1_ch">SSN1_ch</label>
    <input maxlength="3" type="text" id="SSN1_ch" tabindex="1"/>
    <label for="SSN2_ch">SSN2_ch</label>
    <input maxlength="4" type="text" id="SSN2_ch" tabindex="1"/>
    <label for="SSN3_ch">SSN3_ch</label>
    <input maxlength="2" type="text" id="SSN3_ch" tabindex="1"/>
</fieldset>

Then call this:

$("#ssn").bind("keypress", autotab);

And so on for each fieldset
basicinstinctCommented:
jjc9809Author Commented:
BasicInstinct,

This code does not work.  Please see the code that I submitted with my original question.  This code works, but is not tabing on the third textbox field of each as it should to the next TextBox field whether it is a social security number or not.  The Social Security code completely works and tabs correctly as it should.  I have copied this same code for the
phone numbers and the 1st and 2nd textboxes on each work.  It is just the textboxes where four numbers are entered on the phone numbers that is not tabbing.

Just the phone number ones are not working except on the 1st and 2nd boxes on each.  The textbox where four numbers are entered is not tabbing to the next textbox field.

jjc9809
basicinstinctCommented:
ok, the code i wrote you worked in FF and Chrome. i have now deduced that you are using internet explorer.
i have updated it to work in IE too: http://jsfiddle.net/QfW8M/4/

bear in mind, each group of text inputs must be contained in a fieldset for it to work.
jjc9809Author Commented:
Thanks BasicInstinct,

I got this to work.  So you have to setup a fieldset for each phone number separately.

I have three different phone number entries:  HomePhone1, HomePhone2, and HomePhone3
MobilePhone1, MobilePhone2, and MobilePhone3 and OtherPhone1, OtherPhone2, and OtherPhone3.

One other question, Where do you place the fieldsets in the HTML code?  Do you place at the very end of the HTML?

Also, where do you place the calls for each fieldset in the HTML code?

Then call this:

$("#ssn").bind("keypress", autotab);

And so on for each fieldset



I am new to HTML and I really do not know much where to place things.

Do you place in the Script, Body, or very end of the HTML coding?

jjc9809
basicinstinctCommented:
put this right before the closing body tag:

<script type="text/javascript">
(function(){
  $("#ssn").bind("keyup", autotab);
  //$("#someOtherFieldset").bind("keyup", autotab);
  //$("#yetAnotherFieldset").bind("keyup", autotab);
  //and so on
  function autotab(e) {
    var element = e.target,
        tagnameRe = /^input$/i;
    if (element.value.length == element.maxLength) {
        while ((element = element.nextSibling)) {
            if (tagnameRe.test(element.tagName)) {
                element.focus();
                break;
            }
        }
    }
}
})();
</script>

Open in new window


Regarding the fieldsets, you put them inside your HTML form. Fieldsets provide a semantic grouping for your form fields. Since all three fields in a phone number are related you group them in a fieldset.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
jjc9809Author Commented:
Basic Instinct,

I have posted my HTML code for you to llok at.  See the attachment.

jjc9809
HTML-Coding-for-Project.doc
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.