Solved

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

Posted on 2012-04-07
10
1,151 Views
Last Modified: 2012-04-10
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>
0
Comment
Question by:jjc9809
  • 5
  • 4
10 Comments
 
LVL 14

Expert Comment

by:nishant joshi
ID: 37819827
can you able to give your html also?
0
 
LVL 23

Expert Comment

by:basicinstinct
ID: 37820050
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
0
 

Author Comment

by:jjc9809
ID: 37820266
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?
0
 
LVL 23

Expert Comment

by:basicinstinct
ID: 37820300
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
0
 
LVL 23

Expert Comment

by:basicinstinct
ID: 37820302
0
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 

Author Comment

by:jjc9809
ID: 37821208
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
0
 
LVL 23

Expert Comment

by:basicinstinct
ID: 37821763
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.
0
 

Author Comment

by:jjc9809
ID: 37821937
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
0
 
LVL 23

Accepted Solution

by:
basicinstinct earned 500 total points
ID: 37821978
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.
0
 

Author Comment

by:jjc9809
ID: 37823473
Basic Instinct,

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

jjc9809
HTML-Coding-for-Project.doc
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Pick image, show data 4 33
Compare site how does it work 4 52
Using MS Code on my Mac 6 47
SQL best practice question 3 20
I have developed many web applications with asp & asp.net and to add and use a dropdownlist was always a very simple task, but with the new asp.net, setting the value is a bit tricky and its not similar to the old traditional method. So in this a…
ASP.Net to Oracle Connectivity Recently I had to develop an ASP.NET application connecting to an Oracle database.As I am doing it first time ,I had to solve several problems. This article will help to such developers  to develop an ASP.NET client…
Polish reports in Access so they look terrific. Take yourself to another level. Equations, Back Color, Alternate Back Color. Write easy VBA Code. Tighten space to use less pages. Launch report from a menu, considering criteria only when it is filled…
This video shows how to remove a single email address from the Outlook 2010 Auto Suggestion memory. NOTE: For Outlook 2016 and 2013 perform the exact same steps. Open a new email: Click the New email button in Outlook. Start typing the address: …

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now