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
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.

RainverseCommented:
Have a look at this thread: http://forums.asp.net/p/984717/1274231.aspx
0
Lalit ChandraCommented:
see how you can do it ...

<html>
<head>
<script>
function moveOnMax(field,nextFieldID){
  if(field.value.length >= field.maxLength){
    document.getElementById(nextFieldID).focus();
  }
}

</script>      

</head>

<body>

<input type="text" id="testfield" maxlength=10 onkeyup="moveOnMax(this,'nextID')"/>
<input type="text" id="nextID" maxlength=10 onkeyup="moveOnMax(this,'testfield')"/>
</body>
</html>

This is running code.

Hope this can resolve your query .
0
jjc9809Author Commented:
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
0
PMI ACP® Project Management

Prepare for the PMI Agile Certified Practitioner (PMI-ACP)® exam, which formally recognizes your knowledge of agile principles and your skill with agile techniques.

Lalit ChandraCommented:
So what !!
why don't you simply change the mark up to

<input type="text" id="SSN1_ch" maxlength=9 onkeyup="moveOnMax(this,'SSN2_ch')"/>
<input type="text" id="SSN2_ch" maxlength=9 onkeyup="moveOnMax(this,'SSN3_ch')"/>
<input type="text" id="SSN3_ch" maxlength=9 onkeyup="moveOnMax(this,'SSN1_ch')"/>

That's It.

Hope now there might not be any issue.
0
jjc9809Author Commented:
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:TextBox>
                   
                    <script type="text/javascript">
                Function moveOnMax(field,nextFieldID){
                if(field.value.length>=field.MaxLength){
                document.getElementById(nextFieldID).Focus();
                }
                }
                <input type="text"id="SSN1_ch" maxlength=2 onkeyup="moveOnMax(this,'SSN2_ch')"/>
                <input type="text"id="SSN2_ch" maxlength=4 onkeyup="moveOnMax(this,'SSN3_ch')"/>
                <input type="text"id="SSN3_ch" maxlength=3 onkeyup="moveOnMax(this,'SSN1_ch')"/>
               
               
               
                </script>
0
Lalit ChandraCommented:
you have to place the following line
<input type="text"id="SSN1_ch" maxlength=2 onkeyup="moveOnMax(this,'SSN2_ch')"/>
                <input type="text"id="SSN2_ch" maxlength=4 onkeyup="moveOnMax(this,'SSN3_ch')"/>
                <input type="text"id="SSN3_ch" maxlength=3 onkeyup="moveOnMax(this,'SSN1_ch')"/>

outside of the Script section.

As your code is not clearly seem to be valid. Can you post all of your code here?
0
jjc9809Author Commented:
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
0
Lalit ChandraCommented:
why you have set AutoPostBack="True"  on the textbox <asp:TextBox ID="SSN1_ch"

Are you using it in any sense.
0
jjc9809Author Commented:
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
0
Lalit ChandraCommented:
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
0
jjc9809Author Commented:
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
0
Lalit ChandraCommented:
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'],input[id*='SSN2_ch'],input[id*='SSN3_ch']").keyup(function (e) {
            if (e.keyCode == 13)
                $(this).nextAll('input:first').focus();
            if ($(this).val().length == parseInt($(this).attr("maxlength"))) {
                console.log("equeal");
                $(this).nextAll('input:first').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.
0
jjc9809Author Commented:
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
0
Lalit ChandraCommented:
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>
0
jjc9809Author Commented:
Lalit-chandra,

What does the JQuery Reference do?  

jjc9809
0
Lalit ChandraCommented:
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.
0
jjc9809Author Commented:
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
0
Lalit ChandraCommented:
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.
0
jjc9809Author Commented:
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
0
Lalit ChandraCommented:
Hi jjc9809,

As the question of this current post is very time intensive work,as you might also realize. What i want to tell you that conceptually your problem had been solved,but at implementation level it's pending. As it had already taken my lot of time ( i thing you also admit this),so i m not in position to allocate more time to this post only. So, it my advice that as this question had been solved ,and now you want me to take a look  of your code (which is again lengthy task), So, please close this post,and start  another post with the same question with the CODE REVIEW TAG.

I will happy to this in a new post.

Thanks
0

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:
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.
0
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.