Solved

AutoTab JavScript coding on IssueAdmin.aspx web form

Posted on 2012-03-27
21
442 Views
Last Modified: 2012-03-29
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
0
Comment
Question by:jjc9809
  • 10
  • 10
21 Comments
 
LVL 5

Expert Comment

by:Rainverse
ID: 37772657
Have a look at this thread: http://forums.asp.net/p/984717/1274231.aspx
0
 
LVL 7

Expert Comment

by:Lalit Chandra
ID: 37772662
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
 

Author Comment

by:jjc9809
ID: 37773183
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
 
LVL 7

Expert Comment

by:Lalit Chandra
ID: 37773332
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
 

Author Comment

by:jjc9809
ID: 37778745
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
 
LVL 7

Expert Comment

by:Lalit Chandra
ID: 37778980
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
 

Author Comment

by:jjc9809
ID: 37779051
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
 
LVL 7

Expert Comment

by:Lalit Chandra
ID: 37779109
why you have set AutoPostBack="True"  on the textbox <asp:TextBox ID="SSN1_ch"

Are you using it in any sense.
0
 

Author Comment

by:jjc9809
ID: 37779188
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
 
LVL 7

Expert Comment

by:Lalit Chandra
ID: 37779236
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
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 

Author Comment

by:jjc9809
ID: 37779261
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
 
LVL 7

Expert Comment

by:Lalit Chandra
ID: 37779337
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
 

Author Comment

by:jjc9809
ID: 37779670
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
 
LVL 7

Expert Comment

by:Lalit Chandra
ID: 37779791
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
 

Author Comment

by:jjc9809
ID: 37779877
Lalit-chandra,

What does the JQuery Reference do?  

jjc9809
0
 
LVL 7

Expert Comment

by:Lalit Chandra
ID: 37781006
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
 

Author Comment

by:jjc9809
ID: 37781540
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
 
LVL 7

Expert Comment

by:Lalit Chandra
ID: 37781665
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
 

Author Comment

by:jjc9809
ID: 37781973
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
 
LVL 7

Accepted Solution

by:
Lalit Chandra earned 500 total points
ID: 37782986
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
 

Author Closing Comment

by:jjc9809
ID: 37783356
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

Featured Post

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

Join & Write a Comment

A quick way to get a menu to work on our website, is using the Menu control and assign it to a web.sitemap using SiteMapDataSource. Example of web.sitemap file: (CODE) Sample code to add to the page menu: (CODE) Running the application, we wi…
Parsing a CSV file is a task that we are confronted with regularly, and although there are a vast number of means to do this, as a newbie, the field can be confusing and the tools can seem complex. A simple solution to parsing a customized CSV fi…
This video gives you a great overview about bandwidth monitoring with SNMP and WMI with our network monitoring solution PRTG Network Monitor (https://www.paessler.com/prtg). If you're looking for how to monitor bandwidth using netflow or packet s…
This tutorial demonstrates a quick way of adding group price to multiple Magento products.

708 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