Web Analytics Made Easy -
StatCounter Limit input box - CodingForum

Announcement

Collapse
No announcement yet.

Limit input box

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Limit input box

    How can i have 5 input text boxes which will only allow 5 characters in each and then it moves on the the next text box.

    For Example:

    1. [H93K1]
    2. [H93K1] [GDJDU]
    etc.

    Any help will be greatly appreciated,
    thans in advance,

    MW2005
    Get Mozilla Firefox

  • #2
    You can simply set the maxlength property of the input in html to limit the characters, and it can't be gotten around by disabling script.
    Not foolproof, as there ARE ways around it, but not for your average surfer. Always check on the server-side too.
    Set tabindex to let users tab to the next field.

    As to moving focus, that irritates people more often than not. Be sure your users want this. Then you can implement it with script by catching keydown or keypress, then setting the focus of the other control.
    http://javascript.internet.com/forms/auto-tab.html

    If this post contains any code, I may or may not have tested it. It's probably just example code, so no getting knickers in a bunch over a typo, OK? If it doesn't have basic error checking in it, such as object detection or checking if objects are null before using them, put that in there. I'm giving examples, not typing up your whole app for you. You run code at your own risk.
    Bored? Visit
    http://www.kaelisspace.com/

    Comment


    • #3
      Thanks for that, can you show me how you can have a submit button which takes you on to another page after you have filled in all fields,

      thanks,
      mw2005

      This is what i have so far:

      Code:
      <HEAD>
      
      <SCRIPT LANGUAGE="JavaScript">
      <!-- Original:  Cyanide_7 ([email protected]) -->
      <!-- Web Site:  http://members.xoom.com/cyanide_7 -->
      
      <!-- This script and many more are available free online at -->
      <!-- The JavaScript Source!! http://javascript.internet.com -->
      
      <!-- Begin
      var isNN = (navigator.appName.indexOf("Netscape")!=-1);
      function autoTab(input,len, e) {
      var keyCode = (isNN) ? e.which : e.keyCode; 
      var filter = (isNN) ? [0,8,9] : [0,8,9,16,17,18,37,38,39,40,46];
      if(input.value.length >= len && !containsElement(filter,keyCode)) {
      input.value = input.value.slice(0, len);
      input.form[(getIndex(input)+1) % input.form.length].focus();
      }
      function containsElement(arr, ele) {
      var found = false, index = 0;
      while(!found && index < arr.length)
      if(arr[index] == ele)
      found = true;
      else
      index++;
      return found;
      }
      function getIndex(input) {
      var index = -1, i = 0, found = false;
      while (i < input.form.length && index == -1)
      if (input.form[i] == input)index = i;
      else i++;
      return index;
      }
      return true;
      }
      </script>
      </HEAD>
      
      <BODY>
      
      <center>
      <form>
      <small><input onKeyUp="return autoTab(this, 3, event);" size="4" maxlength="4"></small> 
      <small><input onKeyUp="return autoTab(this, 3, event);" size="4" maxlength="4"></small> 
      <small><input onKeyUp="return autoTab(this, 4, event);" size="5" maxlength="4"></small>
      </form>
      </center>
      Get Mozilla Firefox

      Comment


      • #4
        Any submit button will take you to the page defined in your form action property. Give your form a name and an action and a submit button.
        If you want to perform validation before submitting, use the onsubmit event of the form.

        The form:
        <form name="f1" action="newpage" onSubmit="return validateMe(this)">

        Then code to handle submission:
        Code:
        <script type="text/javascript">
        function validateMe(frm)
           {
           // put checks here; return false for errors to prevent submission
           if (conditionsNotMet) return false;
           else return true;
           }

        If this post contains any code, I may or may not have tested it. It's probably just example code, so no getting knickers in a bunch over a typo, OK? If it doesn't have basic error checking in it, such as object detection or checking if objects are null before using them, put that in there. I'm giving examples, not typing up your whole app for you. You run code at your own risk.
        Bored? Visit
        http://www.kaelisspace.com/

        Comment


        • #5
          Can you show me what the code is for an email and all of the forms are filled in check please,

          Thanks,
          MW2005
          Get Mozilla Firefox

          Comment


          • #6
            <input type="text" id="input1" onkeyup="if(this.value.length>=this.maxlength){input2.focus()};">

            Scratch that... It will be:

            <input type="text" id="input1" maxlength="5" onkeyup="if(this.value.length==5){input2.focus()};">

            <input type="text" id="input2" maxlength="5">
            Last edited by Single Paradox; Aug 2, 2005, 03:05 PM.
            Single Paradox
            My Site (Under construction)

            Not too bad for a 15 year old

            Comment

            Working...
            X