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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Form submit when required fields are filled

    Hello,

    So i have a a small script I am working on. It has 4 fields which acts as a 4 digit pin number.

    On page load, the first field gets focus and when you type in the first number, it moves to the next field and all 4 numbers are filled.

    After the last number is entered (and it checks to make sure all 4 are filled) i then need it to submit the form.

    Here are some of the functions I am currently using.

    Code:
    function moveOnMax(field,nextFieldID){
      if(field.value.length >= field.maxLength){
        document.getElementById(nextFieldID).focus();
      }
    }
    
    function validateNumber(evt) {
        var e = evt || window.event;
        var key = e.keyCode || e.which;
    
        if (!e.shiftKey && !e.altKey && !e.ctrlKey &&
        // numbers   
        key >= 48 && key <= 57 ||
        // Numeric keypad
        key >= 96 && key <= 105 ||
        // Backspace and Tab 
        key == 8 || key == 9 || 
        // Home and End
        key == 35 || key == 36 ||
        // left and right arrows
        key == 37 || key == 39 ||
        // Del and Ins
        key == 46 || key == 45) {
            // input is VALID
        }
        else {
            // input is INVALID
            e.returnValue = false;
            if (e.preventDefault) e.preventDefault();
        }
    }
    And this is the Html of the 4 fields.

    Code:
    <div id="pin">
    
    <form name="lookup" action="index.php" method="post">
    
    <div class="two columns alpha" align="top"><input type="text" name="1" value="*" maxlength="1" tabindex="1" 
    
    autofocus="autofocus" id="1" onkeyup="moveOnMax(this,'2');" onFocus="this.value=''" onkeydown="validateNumber(event);"></div> 
    
    <div class="two columns" align="top"><input type="text" name="2" value="*" maxlength="1" tabindex="2" id="2" 
    
    onkeyup="moveOnMax(this,'3');" onFocus="this.value=''" onkeydown="validateNumber(event);"></div> 
    
    <div class="two columns" align="top"><input type="text" name="3" value="*" maxlength="1" tabindex="3" id="3" 
    
    onkeyup="moveOnMax(this,'4');" onFocus="this.value=''" onkeydown="validateNumber(event);"></div> 
    
    <div class="two columns omega" align="top"><input type="text" name="4" value="*" maxlength="1" tabindex="4" id="4" 
    
    onFocus="this.value=''" onkeydown="validateNumber(event);"></div> 
    
    </form>
    
    
    </div>
    Any chance I could get some help on this? I really only know PHP and can only do small tweaks to javascript but this one seems a bit over my head.

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Code:
    document.forms["lookup"].submit();
    would submit the form.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #3
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    How could I check to make sure all 4 fields were filled in and then call that submission?


  •  

    Tags for this Thread

    Posting Permissions

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