jjc9809
asked on
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("max
$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("max
$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("max
$(this).nextAll('input:fir
}
}).bind('keypress', function (e) {
if ((e.keyCode ? e.keyCode : e.which) == "13") {
$(this).nextAll('input:fir
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>
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("max
$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("max
$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("max
$(this).nextAll('input:fir
}
}).bind('keypress', function (e) {
if ((e.keyCode ? e.keyCode : e.which) == "13") {
$(this).nextAll('input:fir
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>
nishant joshi
can you able to give your html also?
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
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
ASKER
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?
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?
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</lab
<input maxlength="3" type="text" id="SSN1_ch" tabindex="1"/>
<label for="SSN2_ch">SSN2_ch</lab
<input maxlength="4" type="text" id="SSN2_ch" tabindex="1"/>
<label for="SSN3_ch">SSN3_ch</lab
<input maxlength="2" type="text" id="SSN3_ch" tabindex="1"/>
</fieldset>
Then call this:
$("#ssn").bind("keypress",
And so on for each fieldset
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</lab
<input maxlength="3" type="text" id="SSN1_ch" tabindex="1"/>
<label for="SSN2_ch">SSN2_ch</lab
<input maxlength="4" type="text" id="SSN2_ch" tabindex="1"/>
<label for="SSN3_ch">SSN3_ch</lab
<input maxlength="2" type="text" id="SSN3_ch" tabindex="1"/>
</fieldset>
Then call this:
$("#ssn").bind("keypress",
And so on for each fieldset
ASKER
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
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
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.
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.
ASKER
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",
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
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",
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
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Basic Instinct,
I have posted my HTML code for you to llok at. See the attachment.
jjc9809
HTML-Coding-for-Project.doc
I have posted my HTML code for you to llok at. See the attachment.
jjc9809
HTML-Coding-for-Project.doc