Easy to Use Web Tools
Form Mails, Calendars, Slideshows
RSS Tickers, Podcasts and more.
www.webpasties.com

Step #1 - Creating the Form

We first create a simple webpage that has the HTML for our Web form. There is nothing out of the ordinary here - just basic HTML defining the city, state, and ZIP code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

<title>ZIP Code to City and State using XmlHttpRequest</title>

</head>

<body>

<form action="post">

  <p>

  ZIP code:

  <input type="text" size="5" name="zip" id="zip"  />

  </p>

  City:

  <input type="text" name="city" id="city" />

  State:

  <input type="text" size="2" name="state" id="state" />

</form>

</body>

</html>

Step #1 Source Code

Step #2 - Adding the Event Handler

We then add an onblur event handler function named updateCityState(). This event handler is called whenever the ZIP code field loses focus.
onblur="updateCityState();"
The updateCityState() function will be in charge of asking the server what the city and state is for a given Zip code. For now, this function does nothing. We will add its guts later.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

<title>ZIP Code to City and State using XmlHttpRequest</title>

<script language="javascript"  type="text/javascript">

function updateCityState() {

}

</script>

</head>

<body>

<form action="post">

  <p>

  ZIP code:

  <input

  type="text" size="5" name="zip" id="zip" onblur="updateCityState();"
 />

  </p>

  City:

  <input type="text" name="city" id="city" />

  State:

  <input type="text" size="2" name="state" id="state" />

</form>

</body>

</html>

Step #2 Source Code

Step #3 - Creating the XMLHttpRequest Object

Of course we need to create an XMLHttpRequest object. Because of variations among the Web browsers, creating this object is more complicated than it need be. The best way to create the XMLHttpRequest object is to use a function named getHTTPObject(). This function has precompile directives which make it pretty cross-browser compatible. Don't worry if the code inside the function is unclear to you. It's not important that you understand its inner workings.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

<title>ZIP Code to City and State using XmlHttpRequest</title>

<script language="javascript"  type="text/javascript">

function updateCityState() {

}

function getHTTPObject() {

  var xmlhttp;

  /*@cc_on

  @if (@_jscript_version >= 5)

    try {

      xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");

    } catch (e) {

      try {

        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

      } catch (E) {

        xmlhttp = false;

      }

    }

  @else

  xmlhttp = false;

  @end @*/

  if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {

    try {

      xmlhttp = new XMLHttpRequest();

    } catch (e) {

      xmlhttp = false;

    }

  }

  return xmlhttp;

}

var http = getHTTPObject(); // We create the HTTP Object

</script>

</head>

<body>

<form action="post">

  <p>

  ZIP code:

  <input type="text" size="5" name="zip" id="zip" onblur="updateCityState();" />

  </p>

  City:

  <input type="text" name="city" id="city" />

  State:

  <input type="text" size="2" name="state" id="state" />

</form>

</body>

</html>

Step #3 Source Code

Step #4 - Some Instant Gratification

Now lets get some instant gratification and add the code that makes the round trip to the server. We first specify the URL for the server-side script to be getCityState.php?param= . This URL will then have the ZIP Code appended to it so that the ZIP code is passed as an HTTP GET parameter named param. This means that if a user types in the ZIP code of 17534, the resulting URL would be getCityState.php?param=17534.

Before we send the HTTP request, we specify the onreadystatechange property to be the name of our new function handleHttpResponse(). This means that every time the HTTP ready state has changed, our function handleHttpResponse() is called.

Our new function handleHttpResponse() sits there waiting to be called and when it does get called, it check to see if the readState is equal to 4. If it is equal to 4 this means that the request is complete. Since the request is complete, it is now fair game to grab the response text (responseText), unpack it, and set the city and state form fields to the returned values. (More readyState info found here.)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

<title>ZIP Code to City and State using XmlHttpRequest</title>

<script language="javascript"  type="text/javascript">

var url = "getCityState.php?param="; // The server-side script

function handleHttpResponse() {

  if (http.readyState == 4) {

    // Split the comma delimited response into an array

    results = http.responseText.split(",");

    document.getElementById('city').value = results[0];

    document.getElementById('state').value = results[1];

  }

}

function updateCityState() {

  var zipValue = document.getElementById("zip").value;

  http.open("GET", url + escape(zipValue), true);

  http.onreadystatechange = handleHttpResponse;

  http.send(null);


 }

function getHTTPObject() {

  var xmlhttp;

  /*@cc_on

  @if (@_jscript_version >= 5)

    try {

      xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");

    } catch (e) {

      try {

        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

      } catch (E) {

        xmlhttp = false;

      }

    }

  @else

  xmlhttp = false;

  @end @*/

  if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {

    try {

      xmlhttp = new XMLHttpRequest();

    } catch (e) {

      xmlhttp = false;

    }

  }

  return xmlhttp;

}

var http = getHTTPObject(); // We create the HTTP Object

</script>

</head>

<body>

<form action="post">

  <p>

  ZIP code:

  <input type="text" size="5" name="zip" id="zip" onblur="updateCityState();" />

  </p>

  City:

  <input type="text" name="city" id="city" />

  State:

  <input type="text" size="2" name="state" id="state" />

</form>

</body>

</html>

I promised instant gratification so lets now create a PHP file named getCityState.php. All this file does is return "Buzzard Puckey,NM" as the city and state. This means that anytime the focus leaves the ZIP code field, the city and state will be automatically set to Buzzard Puckey, NM.

Line 1: Line 2: Line 3: <?php echo "Buzzard Puckey,NM"; ?>

Step #4 Demo | Step #4 Source Code

To Step #5 - Creating the ZIP Code Database