Capturing City and State from a Zip Code

In the ever changing world of internet there is one area that doesn’t change that every developer loves (not really)–wufoothe creation of forms. I find myself always asking for the same information over and over again. In fact, the internet is filled  JotForm with sites that try and help make this requirement less painful. Sites like, Formstack, WUFOO , JotForm or hundreds of more try and make a living on helping pformstackeople with this area.

One problem is the tedious amount of validation that seems to be necessary because people refuse to be perfect. Inevitably, they will enter in information that makes sense to them but to no one else. You can create a multitude of drop downs and multiple choices but in the end unless you can control all possible choices you are left to check data types, lengths, patterns, etc. and hope that that’s enough.

Here is some great insight. The less users have to key in the less mistakes they will create. (Profound, I know). So when I can find a way to limit the data entry the more excited I am. Today, I want to talk about using a Zip Code to get city and state. I realize that sometimes a zip code does not return the right city but even if you could get 90% accuracy isn’t it worth it and then let the user change it.

There are several sites that you can use to create this validation. The first one that comes to mind is Google however; if you are not using Google maps then this is prohibited (actual wording).

prohibitied
There are others like USPS, Ziptastic, Geonames, and webservices. Some of these have limitations on the number of times you can use it or even have a small cost. The one I want to talk about today is

Today I want to talk about is zippopotam.us. This has little if any limitations and provides the tool to return the city and state that a zip code is in.Zippopotam

Note: You can try it here.

In your code you can set it up like this. (Taken from the code behind)

<form action="#" method="post" class="form fancy-form">

			<fieldset>
				<legend>US Address Autocompletion</legend>
				<br/>
				<div>
					<div id="zipbox" class="control-group">
						<label for="zip">Zip</label>
						<input type="text" class='' pattern="[0-9]*" name="zip" id="zip" placeholder="Type your ZIP code"/>
					</div>
				</div>
				<div>
					<div id="citybox" class="control-group" >
						<label for="city">City</label>
						<input type="text" name="city" id="city" placeholder="" />
					</div>
					<div id="statebox" class="control-group">
						<label for="state">State</label>
						<input type="text" name="state" id="state" placeholder="" />
					</div>
				</div>

				<div>
					<a href="http://api.zippopotam.us/static/sample_us.html" class='btn btn-success btn-large'>Submit</a>
				</div>
			</fieldset>
		</form>

The actual declaration uses jquery.

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script>
		$(function() {

			$(document).ready( function()
			{
				$('#citybox').hide();
				$('#statebox').hide();

			});

			// OnKeyDown Function
			$("#zip").keyup(function() {
				var zip_in = $(this);
				var zip_box = $('#zipbox');

				if (zip_in.val().length<5)
				{
					zip_box.removeClass('error success');
				}
				else if ( zip_in.val().length>5)
				{
					zip_box.addClass('error').removeClass('success');
				}
				else if ((zip_in.val().length == 5) )
				{

					// Make HTTP Request
					$.ajax({
						url: "http://api.zippopotam.us/us/" + zip_in.val(),
						cache: false,
						dataType: "json",
						type: "GET",
					  success: function(result, success) {
							// Make the city and state boxes visible
							$('#citybox').slideDown();
							$('#statebox').slideDown();

							// US Zip Code Records Officially Map to only 1 Primary Location
							places = result['places'][0];
							$("#city").val(places['place name']);
							$("#state").val(places['state']);
							zip_box.addClass('success').removeClass('error');
						},
						error: function(result, success) {
							zip_box.removeClass('success').addClass('error');
						}
					});
				}
	});

		});

	</script>

If this saves errors and time then why not add it.

Looking for quality web hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , , , , | Posted under ASP .NET 4.0, Programming/Coding | RSS 2.0

Author Spotlight

David Bauernschmidt

David Bauernschmidt

I live in the historical triangle of Virginia where I am married with two daughters. I have spent over 13 years working for a Fortune 500 company in the computer area. I started in VB 6.0 and by the time I ended my employment I was supervising a development team where we built many web applications. When my first daughter was born I wanted to spend more time with her so I left and became a programmer analyst for local government as well as launch my own company. Since then I have grown James River Webs into a profitable web design and application company helping small businesses create a big presence on the internet. As an employee I have created web application used by citizens and other companies. I enjoy fly fishing, and spending time with my family. I also enjoy learning new approaches and development tools when it comes to developing applications.

Leave a Reply

Your email address will not be published. Required fields are marked *


× 4 = 24

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>