SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Dec 2002
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Automatically moving to next form element

    I have seen this on some sites before, where when you are filling in a form on their site and you have say a long number to enter into 5 box's and you fill the first one up, the cursor automatically moves to the next box. I was wondering how this is done as it's quite a nice feature.

    Any help appreciated.

    Thanks.
    one-x
    "Simplicity is the key to all things great"

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Ok, in my example we'll take the classic case of the US Phone number. The format is XXX-XXX-XXXX. We'll use 3 boxes in this case:
    Code:
    <script language="javascript" type="text/javascript">
    function moveToNext() {
     if(document.form1.phone1.value.length==3) {
     //move to 2nd phone box if 1st has 3 chars entered.
       document.form1.phone2.focus();
      }
     if(document.form1.phone2.value.length==3) {
     //move to 3rd phone box if 2nd has 3 chars entered.
       document.form1.phone3.focus();
      }
    }
    </script>
    </head>
    <body>
    <form name="form1">
    <input type="text" name="phone1" onchange="moveToNext();" />-
    <input type="text" name="phone2" onchange="moveToNext();" />
    - 
    <input type="text" name="phone3" />
    </form>
    Simple example and the code isn't too reusable, but you get the point.

    --Vinnie

  3. #3
    SitePoint Member
    Join Date
    Dec 2002
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great, thanks for your help

    I have no idea what i'd do without this place
    one-x
    "Simplicity is the key to all things great"


Bookmarks

Posting Permissions

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