jjc9809
asked on
AutoTab JavScript coding on IssueAdmin.aspx web form
Hi everyone,
I have a web form called IssueAdmin.aspx that I have the three fields for social security number that I want the user to be able to auto tab when a number is entered each time. For example, when SSN1_ch is entered and three number max length, 455. I want the cursor to be blinking in the SSN2_ch field ready for another entry automatically. I know this can be done with JavaScript, but I am new to it and I do not know where to place in the body of the HTML source window for this to happen.
I have attached my HTML coding and the Javascript coding that I got a sample coding on. I believe I have placed the wrong word names in the coding. It is attached as well called Script1.
Any help in getting this coding placed in the HTML source code would be very helpful.
HTMLCodingIsseuAdmin.doc
script1.doc
I have a web form called IssueAdmin.aspx that I have the three fields for social security number that I want the user to be able to auto tab when a number is entered each time. For example, when SSN1_ch is entered and three number max length, 455. I want the cursor to be blinking in the SSN2_ch field ready for another entry automatically. I know this can be done with JavaScript, but I am new to it and I do not know where to place in the body of the HTML source window for this to happen.
I have attached my HTML coding and the Javascript coding that I got a sample coding on. I believe I have placed the wrong word names in the coding. It is attached as well called Script1.
Any help in getting this coding placed in the HTML source code would be very helpful.
HTMLCodingIsseuAdmin.doc
script1.doc
Have a look at this thread: http://forums.asp.net/p/984717/1274231.aspx
see how you can do it ...
<html>
<head>
<script>
function moveOnMax(field,nextFieldI D){
if(field.value.length >= field.maxLength){
document.getElementById(ne xtFieldID) .focus();
}
}
</script>
</head>
<body>
<input type="text" id="testfield" maxlength=10 onkeyup="moveOnMax(this,'n extID')"/>
<input type="text" id="nextID" maxlength=10 onkeyup="moveOnMax(this,'t estfield') "/>
</body>
</html>
This is running code.
Hope this can resolve your query .
<html>
<head>
<script>
function moveOnMax(field,nextFieldI
if(field.value.length >= field.maxLength){
document.getElementById(ne
}
}
</script>
</head>
<body>
<input type="text" id="testfield" maxlength=10 onkeyup="moveOnMax(this,'n
<input type="text" id="nextID" maxlength=10 onkeyup="moveOnMax(this,'t
</body>
</html>
This is running code.
Hope this can resolve your query .
ASKER
Lalit-Chandra,
SSN1_ch, SSN2_ch, and SSN3_ch are three separate Textbox fields not One SSN field with 9 characters.
Show how with using the three separate fields.
jjc9809
SSN1_ch, SSN2_ch, and SSN3_ch are three separate Textbox fields not One SSN field with 9 characters.
Show how with using the three separate fields.
jjc9809
So what !!
why don't you simply change the mark up to
<input type="text" id="SSN1_ch" maxlength=9 onkeyup="moveOnMax(this,'S SN2_ch')"/ >
<input type="text" id="SSN2_ch" maxlength=9 onkeyup="moveOnMax(this,'S SN3_ch')"/ >
<input type="text" id="SSN3_ch" maxlength=9 onkeyup="moveOnMax(this,'S SN1_ch')"/ >
That's It.
Hope now there might not be any issue.
why don't you simply change the mark up to
<input type="text" id="SSN1_ch" maxlength=9 onkeyup="moveOnMax(this,'S
<input type="text" id="SSN2_ch" maxlength=9 onkeyup="moveOnMax(this,'S
<input type="text" id="SSN3_ch" maxlength=9 onkeyup="moveOnMax(this,'S
That's It.
Hope now there might not be any issue.
ASKER
Lalit-Chandra,
I can't get this to work. Remember I am new to Javascript and I am probably placing in the wrong place in the coding. I have some tables and content areas.
Please see where I am placing in the code below:
<asp:TextBox ID="SSN1_ch" runat="server" AutoPostBack="True" Style="z-index: 163; left: 807px;
position: absolute; top: 83px; text-align: center" TabIndex="12" ToolTip="The first Three Digits of the SSN goes here."
Width="28px" MaxLength="3" BorderStyle="Inset"></asp: TextBox>
<asp:TextBox ID="SSN3_ch" runat="server" AutoPostBack="True" Style="z-index: 164; left: 933px;
position: absolute; top: 84px; text-align: center" TabIndex="14" ToolTip="The Four Digits of the SSN goes here."
Width="46px" MaxLength="4" BorderStyle="Inset" AutoCompleteType="Disabled "></asp:Te xtBox>
<script type="text/javascript">
Function moveOnMax(field,nextFieldI D){
if(field.value.length>=fie ld.MaxLeng th){
document.getElementById(ne xtFieldID) .Focus();
}
}
<input type="text"id="SSN1_ch" maxlength=2 onkeyup="moveOnMax(this,'S SN2_ch')"/ >
<input type="text"id="SSN2_ch" maxlength=4 onkeyup="moveOnMax(this,'S SN3_ch')"/ >
<input type="text"id="SSN3_ch" maxlength=3 onkeyup="moveOnMax(this,'S SN1_ch')"/ >
</script>
I can't get this to work. Remember I am new to Javascript and I am probably placing in the wrong place in the coding. I have some tables and content areas.
Please see where I am placing in the code below:
<asp:TextBox ID="SSN1_ch" runat="server" AutoPostBack="True" Style="z-index: 163; left: 807px;
position: absolute; top: 83px; text-align: center" TabIndex="12" ToolTip="The first Three Digits of the SSN goes here."
Width="28px" MaxLength="3" BorderStyle="Inset"></asp:
<asp:TextBox ID="SSN3_ch" runat="server" AutoPostBack="True" Style="z-index: 164; left: 933px;
position: absolute; top: 84px; text-align: center" TabIndex="14" ToolTip="The Four Digits of the SSN goes here."
Width="46px" MaxLength="4" BorderStyle="Inset" AutoCompleteType="Disabled
<script type="text/javascript">
Function moveOnMax(field,nextFieldI
if(field.value.length>=fie
document.getElementById(ne
}
}
<input type="text"id="SSN1_ch" maxlength=2 onkeyup="moveOnMax(this,'S
<input type="text"id="SSN2_ch" maxlength=4 onkeyup="moveOnMax(this,'S
<input type="text"id="SSN3_ch" maxlength=3 onkeyup="moveOnMax(this,'S
</script>
you have to place the following line
<input type="text"id="SSN1_ch" maxlength=2 onkeyup="moveOnMax(this,'S SN2_ch')"/ >
<input type="text"id="SSN2_ch" maxlength=4 onkeyup="moveOnMax(this,'S SN3_ch')"/ >
<input type="text"id="SSN3_ch" maxlength=3 onkeyup="moveOnMax(this,'S SN1_ch')"/ >
outside of the Script section.
As your code is not clearly seem to be valid. Can you post all of your code here?
<input type="text"id="SSN1_ch" maxlength=2 onkeyup="moveOnMax(this,'S
<input type="text"id="SSN2_ch" maxlength=4 onkeyup="moveOnMax(this,'S
<input type="text"id="SSN3_ch" maxlength=3 onkeyup="moveOnMax(this,'S
outside of the Script section.
As your code is not clearly seem to be valid. Can you post all of your code here?
ASKER
HTMLCoding.docLalit-Chandra,
Here is all of the HTML Code for the web form: IssueAdmin.aspx
I have attached the coding in a Word document called HTMLCoding.Doc
Here is all of the HTML Code for the web form: IssueAdmin.aspx
I have attached the coding in a Word document called HTMLCoding.Doc
why you have set AutoPostBack="True" on the textbox <asp:TextBox ID="SSN1_ch"
Are you using it in any sense.
Are you using it in any sense.
ASKER
Lalit-Chandra,
SSN1_ch, SSN2_ch, and SSN3_ch, I can select enter after entering 455 for example and the cursor will go to SSN2_ch and I can enter say 78 and select the Enter Key and the cursor goes to SSN3_ch this way only if autoPostback is set to true. I have the Tab Index set for SSN1_ch
as 12, SSN2_ch as 13, and SSN3_ch as 14. Using the autotab that you are trying to do, I may not need any of the property settings I have indicated.
As I said before, I am new to HTML. I have been coding Visual Basic.Net for years, but the HTML coding is all new to me. I really do not know what I am doing with the HTML. I may not even need for autopostback to be set to true.
jjc9809
SSN1_ch, SSN2_ch, and SSN3_ch, I can select enter after entering 455 for example and the cursor will go to SSN2_ch and I can enter say 78 and select the Enter Key and the cursor goes to SSN3_ch this way only if autoPostback is set to true. I have the Tab Index set for SSN1_ch
as 12, SSN2_ch as 13, and SSN3_ch as 14. Using the autotab that you are trying to do, I may not need any of the property settings I have indicated.
As I said before, I am new to HTML. I have been coding Visual Basic.Net for years, but the HTML coding is all new to me. I really do not know what I am doing with the HTML. I may not even need for autopostback to be set to true.
jjc9809
code of textbox of id SSN1_ch, and SSN3_ch are located at one place ,but the textbox of id SSN2_ch is located somewhere else.So, it's very confusion for me to understand.
If possible then can you post the screen-shot of it (indicate the sequence if possible).
Thanks
If possible then can you post the screen-shot of it (indicate the sequence if possible).
Thanks
ASKER
Sure.
I have attached the web form as it runs. I may have to put each line in a table. might look better.
IssueAdminWeb.jpg
I have attached the web form as it runs. I may have to put each line in a table. might look better.
IssueAdminWeb.jpg
ok, i guess i have figure out your problem.
do the following
1. Make a Jquery reference in the Head section of master page (if not yet done)
Prefer it is the first js file that you have included.
2. Remove all of mine javascript code from the content page.
3. Set Autopostback="False" of all the three textboxs.
4.Paste the below code at the bottom of your content page.
<script language ="javascript" >
$(function () {
$("input[id*='SSN1_ch'],in put[id*='S SN2_ch'],i nput[id*=' SSN3_ch']" ).keyup(fu nction (e) {
if (e.keyCode == 13)
$(this).nextAll('input:fir st').focus ();
if ($(this).val().length == parseInt($(this).attr("max length"))) {
console.log("equeal");
$(this).nextAll('input:fir st').focus ();
}
});
});
</script>
It make auto-tab to next textbox once you have reached it's maxlenght,and if press enter then also it will move focus to it's near textbox.
Hope this will work upto your thinking.
do the following
1. Make a Jquery reference in the Head section of master page (if not yet done)
Prefer it is the first js file that you have included.
2. Remove all of mine javascript code from the content page.
3. Set Autopostback="False" of all the three textboxs.
4.Paste the below code at the bottom of your content page.
<script language ="javascript" >
$(function () {
$("input[id*='SSN1_ch'],in
if (e.keyCode == 13)
$(this).nextAll('input:fir
if ($(this).val().length == parseInt($(this).attr("max
console.log("equeal");
$(this).nextAll('input:fir
}
});
});
</script>
It make auto-tab to next textbox once you have reached it's maxlenght,and if press enter then also it will move focus to it's near textbox.
Hope this will work upto your thinking.
ASKER
Lalit-Chandra,
1. Make a Jquery reference in the Head section of master page (if not yet done)
Prefer it is the first js file that you have included.
How do I make a Jquery reference in the Head section? Remember I am new to all of this.
What coding needs to be placed in there and be called a Jquery reference.
jjc9809
1. Make a Jquery reference in the Head section of master page (if not yet done)
Prefer it is the first js file that you have included.
How do I make a Jquery reference in the Head section? Remember I am new to all of this.
What coding needs to be placed in there and be called a Jquery reference.
jjc9809
just add the below line in the Head section of your Master page html section
<script script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
ASKER
Lalit-chandra,
What does the JQuery Reference do?
jjc9809
What does the JQuery Reference do?
jjc9809
its an Javascript library which conatins whcih makes dom manipulation task easier.
I have use it's method ($) in my script code,which require it's reference and that jquery refernce file will provide the defination of $ to the javascript.
I have use it's method ($) in my script code,which require it's reference and that jquery refernce file will provide the defination of $ to the javascript.
ASKER
Lalit Chandra,
Another question, do I remove the HTML coding for SSN1_ch, SSN2_ch, and SSN3_ch or do I keep it there since I have arranged the textboxes on the web form and the computer has placed the coding for this automatically? When you put your coding won't there be referencing SSN1, SSN2, adn SSN3 twice?
jjc9809
Another question, do I remove the HTML coding for SSN1_ch, SSN2_ch, and SSN3_ch or do I keep it there since I have arranged the textboxes on the web form and the computer has placed the coding for this automatically? When you put your coding won't there be referencing SSN1, SSN2, adn SSN3 twice?
jjc9809
Leave all of your asp.net textbox control as it is. NO need to change inspite of it's AutoPostback =False.
you should remove the html code of textboxex like below
<input type ="text" .... </input>
paste my script at the end of the content page.
Hope it will solve your issue.
you should remove the html code of textboxex like below
<input type ="text" .... </input>
paste my script at the end of the content page.
Hope it will solve your issue.
ASKER
Lalit-Chandra,
I still can't get this to work. Please see where I have placed the revised coding as instructed. I may have placed in the wrong document or in the wrong place or added some required attributes not required. Please check the two attachments I am sending you.
Thanks
jjc9809
RevisedContentPageCoding.doc
ContentMasterRevised.doc
I still can't get this to work. Please see where I have placed the revised coding as instructed. I may have placed in the wrong document or in the wrong place or added some required attributes not required. Please check the two attachments I am sending you.
Thanks
jjc9809
RevisedContentPageCoding.doc
ContentMasterRevised.doc
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Lalit Chandra,
I will be glad to close this post, I will go ahead give you a grade, but the problem has not been solved.
I will be glad to close this post, I will go ahead give you a grade, but the problem has not been solved.