Introduction
This zip code validation module was developed by Ed Trager using PHP and JavaScript for use in the Gladiator project. The module allows one to enter just the zipcode in the city field of an online form (since the city field will generally precede the state and zipcode fields) and the program will lookup and fill in the city and state fields in the form for you automatically!
The most interesting design feature is the use of a hybrid data model where only the most frequently used zipcodes are preloaded on the client. For example, if your organization or business is located in Michigan, you would expect most of your clients to have Michigan addresses and would therefore set up the module so that only the data for cities in Michigan get preloaded into the browser. For zipcodes outside of Michigan, the JavaScript code will query the database back on the server. The technical details of how this works are described below.
Features
Cities, states, and zipcodes are stored in a database table on the server which is accessed via PHP. In addition to the city,state, and zipcode columns, there is also a binary column called "showfirst". Zipcodes flagged with a "1" in the showfirst column form the set of zipcodes that will be preloaded into a JavaScript array when the application is first loaded by the client. Loading one or two states-worth of zipcode data --anywhere between three to six thousand city names and accompanying zipcodes-- actually represents a very reasonable amount of data that does not in any way exceed the amount of data that one would normally send to a client in an HTML page. Querying the pre-loaded data is for all intents and purposes instantaneous. If the majority of your clients or customers come from the state in which your business or organization is located, then this method of preloading the data is ideal (Fig. 1).
Fig. 1. When the application is loaded, the city, state, and zipcode data for one's most frequently-accessed clients or customers (for example, Michigan clients) are sent and pre-loaded into a JavaScript array on the browser. The remaining larger but less-frequently accessed subset of the data remains on the server where it is queried on an as-need basis.
When the user enters a zipcode that does not exist in the local client-side array, the JavaScript code constructs a query form in a pop-up window and submits the form for processing by the server. Data from successful queries are automatically transferred back into the parent form. While this process naturally has a greater latency than a client-side search, it neatly avoids the worser problem of trying to load too much data onto the client (Fig 2).
Fig. 2. Zipcodes that can't be located client-side are queried from the server.
Try it!
Enter a zip code
A little over 6000 zip codes from cities in the Great Lakes states (Illinois, Indiana, Ohio, Michigan, and Wisconsin) have been preloaded in your browser. Try entering 54761, 45874, 49917, 47427 or 61062 in the City field.
Then try entering a zip code from a state that hasn't been preloaded, such as one of these from famous American National Parks: 82190, 99755, 95389, or 79834:
City: State: Zip: