auto submit after x characters

Hello experts,

I am new to this section, but I have created a basic clocking-in machine using PHP. I have everything setup perfectly but now I want to extend it a little to make it more realistic.
I currently have a form with 1 input text which is auto-selected. The user enters their code and presses enter, which is great.

I am waiting to purchase a card reader (magnetic swipe) and I am looking to get the user to swipe a card and have the form submit automatically once the card has been swiped. IE if the number of characters reaches a certain length. I dont know what format of cards will be used yet, so a solution checking for the first x characters would be sufficient. Any suggestions??

the page in question is below

<html>
      <head>
            <title>Armour Group - TimeClock system...</title>
            <meta http-equiv="Expires" content="Mon, 01 Jan 1996 23:59:59 GMT" />
            <meta http-equiv="Pragma" content="no-cache">
<SCRIPT LANGUAGE="JavaScript">
<!-- Original:  Xavier R. (xav@lougaou.com) -->
<!-- Modified:  Benjamin Wright, Editor -->
<!-- Web Site:  http://www.lougaou.com/ -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
function clock() {
if (!document.layers && !document.all) return;
var digital = new Date();
var hours = digital.getHours();
var minutes = digital.getMinutes();
var seconds = digital.getSeconds();
var amOrPm = "AM";
if (hours > 11) amOrPm = "PM";
if (hours > 12) hours = hours - 12;
if (hours == 0) hours = 12;
if (minutes <= 9) minutes = "0" + minutes;
if (seconds <= 9) seconds = "0" + seconds;
dispTime = hours + ":" + minutes + ":" + seconds + " " + amOrPm;
if (document.layers) {
document.layers.pendule.document.write(dispTime);
document.layers.pendule.document.close();
}
else
if (document.all)
pendule.innerHTML = dispTime;
setTimeout("clock()", 1000);
}
//  End -->

function FormSetFocus()
{
  if (document.forms.length > 0)
  {
    var TForm = document.forms[0];

    for (i=0;i<TForm.length;i++)
    {
      if ((TForm.elements[i].type=="text")||
       (TForm.elements[i].type=="textarea")||
         (TForm.elements[i].type=="password")||
       (TForm.elements[i].type.toString().charAt(0)=="s"))
      {
        document.forms[0].elements[i].focus();
        break;
      }
    }
  }
}

</script>

      </head>            
      <body onLoad="clock()">
            <center>
                  <h2>TimeClock System</h2>
                  <br/>
                  <br/>
                  <br/>
                  <span id="pendule" style="background: #000000; color: #80c0c0; font-weight: bold; font-size: 40px; Padding: 20px; border: 20px #ffffff"></span>
                  <br/>
                  <br/>
                  <br/>
                  Please enter your passcode
                  <br/>
                  <br/>
                  <form name="log" method="post" action="proc_log.php">
                        <input type="password" name="passcode" />
                        <br/>
                        <br/>
                        <input type="submit" value="CLOCK" />
                  </form>
            </center>
            <script language="javascript" type="text/javascript">
                  FormSetFocus();
            </script>
      </body>
</html>
LVL 9
waygoodAsked:
Who is Participating?
 
ZvonkoConnect With a Mentor Systems architectCommented:
Some small improvment:


                    <input type="password" name="passcode"   onKeyUp="if(this.value.length>3)this.form.submit()" />


0
 
waygoodAuthor Commented:
The card swipe will be connected to the keyboards ps2 connection as an extension. So basically it emulates using the keyboard.

We cant stretch to buying expensive cards and equipment, so I'll probably use some free store loyalty cards with labels on the front. So I dont know the format of the data as yet, and cant change it, as we will only have a reader.
0
 
BustaroomsConnect With a Mentor Commented:
im not sure how or if this will work once you hook up a card reader but this little snippet will submit the form after the user presses more than 5 keys on a normal keyboard

<input type="password" name="passcode" onkeyup="if(count >5) this.form.submit(); else count++;" />
0
Cloud Class® Course: Ruby Fundamentals

This course will introduce you to Ruby, as well as teach you about classes, methods, variables, data structures, loops, enumerable methods, and finishing touches.

 
waygoodAuthor Commented:
p.s. Its only running on one machine using IE5+, I wouldnt like to install any third party software to check the keyboard buffer as the pc may also be used for other things.
0
 
ZvonkoSystems architectCommented:
Like this:

<input type="password" name="passcode" onKeyUp="if(this.value.length==4)this.form.submit()"/>

I set the character count to four. Set greater count if needed.

0
 
BustaroomsCommented:
duh, what was i thinking witha counter   length is so much better
0
 
ZvonkoSystems architectCommented:
Bustarooms, did you test your proposal?
0
 
BustaroomsCommented:
no, does it now work?  it doesn't matter either way, like i said, using the length is much better

waygood go with Zvonko's
0
 
GwynforWebCommented:
this works nicely

<form name="log" method="post" action="proc_log.php">
<input type="password" name="passcode"   onKeyUp="if(this.value.length==4) this.form.submit()" />
</form>
0
 
ZvonkoSystems architectCommented:
I mean only for the future readers is better to mention the pittfal in your code:
Because the "count" var was not declared before if condition checking will the statement fail at that position.
Error will be:
"count" is undefined

0
 
BustaroomsCommented:
thanks Zv, it would need to be declared somewhere else in the document.
0
 
ZvonkoSystems architectCommented:
Besid that the check for length "four" is a copy of my code it has the same problem as my previous code had (not my last example, it works).
If you check for equal, then you miss character repetition by holding down a key and the submit() will NOT fire.
0
 
waygoodAuthor Commented:
dont know if this is an issue using the swipe but I'll post another question if things dont work out.

I had a problem getting the page to work as i saved a copy off to index2.php THEN remembered I was redirecting back to index.php afterwards. Duh!

Nice job guys, I'll go with Zvonko, but try to give some points to Bustarooms too.
0
 
ZvonkoSystems architectCommented:
Splitting points to experts who helped is always a good idea :)
0
 
ZvonkoSystems architectCommented:
Thanks.
0
 
waygoodAuthor Commented:
thank you all for your speedy replies.

See you soon
Matt
0
 
GwynforWebCommented:
"Besid that the check for length "four" is a copy of my code it ..."

Zvonko I am shocked that you should make such an accusation
0
 
waygoodAuthor Commented:
why is it shocking?
if Zvonko posted an answer and then you posted the exact same answer, you either didnt read it, was typing for over 15mins while the other message was being added or you did it deliberately. Either way I gave points to the first person to post an answer that worked, I also gave points for changing the answer slightly as the first method was a little flawed but still worked.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.