How to Auto-Fill City/State from Zipcode on your Forms

Have you ever been filling out a form on a website when you realized your city and state had already been populated for you? It used to be amazing but now it’s just the standard. If your website doesn’t auto-populate the city and state after someone enters the zip, you’re falling behind. Luckily it’s super easy to do.

Why would you want to do this?

• It makes less fields that your customer has to fill out. Less fields = more conversions
• It increases data quality and consistency. No more misspellings or different CASES in your list
• Everyone else is doing it. Seriously, this has been popular since 2001.

Here’s how, in 3 easy steps:

1. Acquire a Zipcode Location database. Here’s one that we offer that provides easy zip to city/state lookup.
2. Write a server-side script that will lookup the city and state given the zip as a url parameter. This will be used in an AJAX call. Sample script is provided below.
3. Put a javascript snippet on your form that will call that script once the zip code has been filled out. We’ve provided an example of this script below too.

Here’s an example server-site lookup script (written in PHP, using a MySQL database)

<?php
//you'll have to replace your credentials here
$mysqldatabase="XXXX";
$mysqluser="XXXX";
$mysqlpassword="XXXXX";

//connect to db
$DBCONN=mysql_connect("localhost",$mysqluser,$mysqlpassword);
if(!$DBCONN) die("Couldn't connect to MySQL Server.");

//perform lookup
$query = "SELECT city, state_abbr FROM EasyDbsZipcodeLocations WHERE zip=".mysql_real_escape_string($_GET['zip']);
$result=mysql_db_query($mysqldatabase, $query) or die(mysql_error());

//print out results
$row = mysql_fetch_array($result);
echo $row['city'].",".$row['state_abbr'];
?>

Here’s an example client-side AJAX script (Javascript)

<script>
var ajax = getHTTPObject();

function getHTTPObject()
{
	var xmlhttp;
	if (window.XMLHttpRequest) {
	  // code for IE7+, Firefox, Chrome, Opera, Safari
	  xmlhttp=new XMLHttpRequest();
	} else if (window.ActiveXObject) {
	  // code for IE6, IE5
	  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	} else {
	  //alert("Your browser does not support XMLHTTP!");
	}
	return xmlhttp;
}

function updateCityState()
{
	if (ajax)
	{
		var zipValue = document.getElementById("zipcode").value;
		if(zipValue)
		{
			var url = "path/to/your/script/get_city_state.php";
			var param = "?zip=" + escape(zipValue);

			ajax.open("GET", url + param, true);
			ajax.onreadystatechange = handleAjax;
			ajax.send(null);
		}
	}
}
function handleAjax()
{
	if (ajax.readyState == 4)
	{
		citystatearr = ajax.responseText.split(",");

		var city = document.getElementById('city');
		var state = document.getElementById('state');

		city.value = citystatearr[0];
		state.value = citystatearr[1];
	}
}

//then on your form:
// 1: Update zip field to call onblur="updateCityState();"
// 2: Make sure your zip, city, and state fields have ID's with those names
</script>

That’s all you need! Awesome!

Check out a live, working demo here.

Everyone else is already doing this so if you’re not, your competitors are! Feel free to post any questions in the comments below.