Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Senior Coder angst's Avatar
    Join Date
    Apr 2004
    Location
    Toronto, Ontario
    Posts
    2,114
    Thanks
    15
    Thanked 122 Times in 122 Posts

    Question move to next input?

    hi,
    I've got a form where I need a use to enter an ip address, each octet has it's own text input, what I want to know, is if there is a way to make the courser jump to the next input box once the current one is filled in, just like configuring tcp/ip in windows networking. I've seen this done before, but i'm not sure how.

    thanks in advance for your time!

    -Ken

  • #2
    New Coder
    Join Date
    Oct 2005
    Posts
    87
    Thanks
    1
    Thanked 0 Times in 0 Posts
    The only problem with the code below is that it assumes that the ip address being entered will contain 3 numbers in each octect. Otherwise it won't skip to the next input box.

    Code:
    <script>
    num = 0;
    onkeydown = function() {
         if (document.formname.elements[num].value.length == 3) {
             var attrib = eval('document.formname.elements[++num]');
             attrib.focus()
         }
    }
    
    function setnum(elem) {
    num = elem;
    }
    </script>
    
    <form name="formname">
    <input type="text" name="inputname1" size=3 value="" onclick="setnum(0)"> 
    <input type="text" name="inputname2" size=3 value="" onclick="setnum(1)"> 
    <input type="text" name="inputname3" size=3 value="" onclick="setnum(2)"> 
    <input type="text" name="inputname4" size=3 value="" onclick="setnum(3)"> 
    </form>

  • #3
    Senior Coder angst's Avatar
    Join Date
    Apr 2004
    Location
    Toronto, Ontario
    Posts
    2,114
    Thanks
    15
    Thanked 122 Times in 122 Posts
    not sure if i'm missing something, but that doesn't work at all for me,
    just allowed unlimited numbers to be entered into each box, and doesn't skip to the next one.

    any ideas?

    thanks again for your time!
    -Ken

  • #4
    Senior Coder angst's Avatar
    Join Date
    Apr 2004
    Location
    Toronto, Ontario
    Posts
    2,114
    Thanks
    15
    Thanked 122 Times in 122 Posts
    or if this can't be done, is there a way to just add in a dot automaticly every 3 digits?



    thanks again for your time!
    -Ken

  • #5
    teh Moderatorinator
    Join Date
    Sep 2004
    Location
    USA
    Posts
    2,472
    Thanks
    4
    Thanked 40 Times in 40 Posts
    You should check the length of the box with the onkeyup handler, and then do your move:
    Code:
    <html>
    <head>
    <script type="text/javascript">
    function Jump(CurElm, NextElm)
    {
    	if(CurElm.value.length == 3) document.formname[NextElm].select();
    }
    </script>
    </head>
    <body>
    <form name="formname">
    <input type="text" name="inputname1" size=3 value="" onkeyup="Jump(this, 'inputname2');">
    <input type="text" name="inputname2" size=3 value="" onkeyup="Jump(this, 'inputname3');">
    <input type="text" name="inputname3" size=3 value="" onkeyup="Jump(this, 'inputname4');">
    <input type="text" name="inputname4" size=3 value="">
    </form>
    </body>
    </html>
    Good luck

  • #6
    Senior Coder angst's Avatar
    Join Date
    Apr 2004
    Location
    Toronto, Ontario
    Posts
    2,114
    Thanks
    15
    Thanked 122 Times in 122 Posts
    kool!
    exactly what i as looking for.

    Thanks!

    -Ken


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •