Chris Nizzardini, Salt Lake City Utah, Web Developer Specializing in LAMP+Ajax Since 2006

My Blog

Here is my awesome blog. You can find information on programming, linux, documentation, tips for code and database optimization, my thoughts and rants, and whatever else I feel like sharing. Feel free to contribute to the blog by posting comments and asking questions.

Archive for October, 2008

How to Create a JavaScript Key Listener

Posted by chris on October 27th, 2008 Comments(0)

Need help with JavaScript key listeners? Using a key listener in JavaScript is great way to make your web application react like a desktop application. If you’re not using a javascript framework such as MooTools or JQuery (I’ll go over these after covering generic javascript) then the first thing you need to do is place this code in your body onload event. This will call the returnKey function every time the browser detects a key press.

1

document.onkeypress = returnKey;

We will listen specifically for key code 13, the return key, where a text node has focus. Next we create a switch statement that looks at the text nodes id. We will put in a case to look for the text node id of search. This will call a getProduct function and also highlight the search field.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

function returnKey(evt)
{
	var evt  = (evt) ? evt : ((event) ? event : null);
	var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
 
	if ((evt.keyCode == 13) && (node.type == "text")) 
	{
		switch(node.id)
		{
			case 'search':
				getProduct();
				$('search').select();
				break;
		}
	}
}

To do the same thing using the JQuery framework is a bit more simple. This example JavaScript code will create keyup event:

$(document).ready(function(){
    $('#IDofTextInput').bind('keyup',function(e){
        // your function/code to execute goes here
    })
});

Here is some example code for creating a keypress event using the MooTools Framework for JavaScript:

window.addEvent('domready',function(){
	$('IDofTextInput').addEvent('keypress',function(event){
		// your function/code to execute
	})
})

Drop me a comment if this helped your or if you feel I missed something, thanks for reading.

In JavaScript and Ajax (, , , , , , )

JavaScript snippet for handling EFT check scanners

Posted by chris on October 17th, 2008 Comments(0)

This piece of code will separate out the account number and routing number from a scanned check. I yanked this function out of a payment class I wrote for a point of sale web application I recently developed. It’s a mootools class, but the core logic can be pulled out and applied pretty much anywhere.

  1. First pass a string into the function, where the string is the string from the check scan
  2. I immediately validate the information is correct. Scanners will send a series of question marks if the check was scanned in at an odd angle. They are very picky, but I tested many ways of sending the check through and this should catch most scenarios
  3. The routing number is stored between two “T” characters in the string. So I look for the T’s, remove them and store off the routing number
  4. The end of the accounting number has a “U” character immediately after it so and the account number starts immediately after the routing number, so I substring that out
  5. I then do some more error checking. Since both the account and routing number should be numeric I use isNan() to verify this.
  6. The entire snippet is wrapped in a try catch so should anything fail it can be logged and reported to the end user
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

	setCheckAttributes: function(string){
		try{
			if(string.charAt(0)=='?' || string.charAt(1)=='?' || string.charAt(1)=='?')
			{
				displayMessageWindow('Invalid Check','Please verify the check was scanned properly with the check facing in and the routing/account numers at the bottom','error');
				return false;
			}
 
			var t1=string.search("T"); // start of routing number indentifier
			string = string.replace("T","");
			var t2=string.search("T"); // end of routing number indentifier, start of account number indentifier
 
			this.routing = string.substring(t1,t2); // set routing number
 
			var u=string.lastIndexOf("U"); // end of account number indentifier
 
			var account = string.substring((t2+1),u);
			var accountArr = account.split(" ");
 
			this.account = accountArr.join(""); // set account number
 
			if(isNaN(this.account) || isNaN(this.routing)){
				this.account='';
				this.routing='';
				this.payment_method_id=0;
				this.type='';
				displayMessageWindow('Invalid Check','The system encountered an error reading the check and has invalid (non-numeric) information for either the routing or account number.','error');
				return false;
			}
			return true;
		}
		catch(err){
			 pushToErrorLog('class Payment::setCheckAttributes() ' + err);
			 return false;
		}

To determine when a check has been scanned you can use the code in my post, JavaScript snippet for handling credit card readers.

In JavaScript and Ajax ()

JavaScript snippet for handling credit card readers

Posted by chris on October 16th, 2008 Comment(1)

This JavaScript function will successfully extract a credit card number, name of the card holder, and expiration date from any standard credit card reader. I’ve tested this on numerous card types from American Express to Visa and many in between. This function was originally a method within a MooTools class that I wrote for a web application. So it will look a little strange, but is easily modifiable if you know your way around JavaScript, especially if you have played around with any JavaScript framework. A typical string stored with in the magnetic strip of a credit card will look something like the string below. In this string you can see the card belongs to Jon Fubar, the credit card number is 123401230123012, and the expiration date is 01/09. It is not possible to extract the CVV from this string (good for security purposes).

Read the rest of this entry »

In JavaScript and Ajax ()