Solved

auto submit after x characters

Posted on 2004-03-26
18
2,145 Views
Last Modified: 2013-12-03
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>
0
Comment
Question by:waygood
  • 7
  • 5
  • 4
  • +1
18 Comments
 
LVL 9

Author Comment

by:waygood
Comment Utility
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
 
LVL 10

Assisted Solution

by:Bustarooms
Bustarooms earned 75 total points
Comment Utility
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
 
LVL 9

Author Comment

by:waygood
Comment Utility
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
 
LVL 63

Expert Comment

by:Zvonko
Comment Utility
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
 
LVL 63

Accepted Solution

by:
Zvonko earned 100 total points
Comment Utility
Some small improvment:


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


0
 
LVL 10

Expert Comment

by:Bustarooms
Comment Utility
duh, what was i thinking witha counter   length is so much better
0
 
LVL 63

Expert Comment

by:Zvonko
Comment Utility
Bustarooms, did you test your proposal?
0
 
LVL 10

Expert Comment

by:Bustarooms
Comment Utility
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
 
LVL 31

Expert Comment

by:GwynforWeb
Comment Utility
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
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 
LVL 63

Expert Comment

by:Zvonko
Comment Utility
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
 
LVL 10

Expert Comment

by:Bustarooms
Comment Utility
thanks Zv, it would need to be declared somewhere else in the document.
0
 
LVL 63

Expert Comment

by:Zvonko
Comment Utility
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
 
LVL 9

Author Comment

by:waygood
Comment Utility
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
 
LVL 63

Expert Comment

by:Zvonko
Comment Utility
Splitting points to experts who helped is always a good idea :)
0
 
LVL 63

Expert Comment

by:Zvonko
Comment Utility
Thanks.
0
 
LVL 9

Author Comment

by:waygood
Comment Utility
thank you all for your speedy replies.

See you soon
Matt
0
 
LVL 31

Expert Comment

by:GwynforWeb
Comment Utility
"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
 
LVL 9

Author Comment

by:waygood
Comment Utility
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

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Excel styles will make formatting consistent and let you apply and change formatting faster. In this tutorial, you'll learn how to use Excel's built-in styles, how to modify styles, and how to create your own. You'll also learn how to use your custo…

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now