Form submit when required fields are filled

[carlhussey]

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.

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.

<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.

[AndrewGSW]

document.forms["lookup"].submit();

would submit the form.

[carlhussey]

How could I check to make sure all 4 fields were filled in and then call that submission?