Zipcode to City, State Fill In

**kuau** · 06-09-2010, 08:24 PM

I have a mySQL table with 43,000 zipcodes matched with cities & states (I put the city and state into one field). I would like to use it with the html form I made to collect client information. Can someone please tell me how to get the city, state to fill in automatically when the zipcode is entered?

I'd be happy to provide the zipcode table to DD. With the right javascript, it would be a pretty cool script for DD's library.

Thanks!

**djr33** · 06-09-2010, 08:48 PM

Do you want this to happen serverside (after the form is submitted) or while the user is filling out the form?
The first is easy enough: just take the sent value, search the database for the related value, and add that to the email or whatever else you're doing with the form.

The second is more complex, but basically the same idea:
1. Create a PHP page that takes a zip code input (let's say page.php?zip=12345), searches the database against $_GET['zip'] then outputs ONLY the text of the city/state result (no <html> tags, etc. just the city/state).
2. For your zip code field create an onchange event:
<input type="text" name="zip" onChange="getzip(this.value);">
3. Create a Javascript function (I called it "getzip" above) that uses Ajax to get the results of "page.php?zip=ZIP" as above. Then it should set document.GetElementById('mycitystatefield').value = ajaxresult;

For the final version you may want to add a conditional so that if there is already some value in city/state it isn't replaced automatically, just if it's blank and they entered the zip first. But that's based on how you want the users to interact with the site. Remember also that a zip code is all you need to create an address, so you could just skip all of this and figure that out later on the server: "Address: _____________. Zip: ______", and that's all they need to give you. Of course if there's a typo, it'll help if they see the result you get.

**kuau** · 06-10-2010, 12:03 AM

Hi Daniel:

It is the second case. Thanks for helping me (again). This is what I did for Step 1...

Code:

<?php 
include_once('db-connectdb.php'); 
if(isset($_GET['zip']) && $_GET['zip'] != ""){
$sql = "SELECT citystate FROM zipcode WHERE zip = '".$_GET['zip']."'";	
$result = mysql_query($sql,$connection) or die("Couldn't execute $sql query. <br> mysql error: ".mysql_error());
$row = mysql_fetch_row($result); 
$citystate = $row['citystate']; 
echo $citystate;
}
?>

I added the OnChange to the zip form field. But I do not know how to do step 3... have no clue about Ajax.

I added this to the <head> section as a guess but it doesn't do anything...

Code:

<script language="Javascript" type="text/javascript">
function getzip() 
  document.GetElementById('mycitystatefield').value = ajaxresult;
</script>

You can see the page here... http://www.costgallery.com/php/client-add.php

Thanks, e

**kuau** · 06-10-2010, 12:58 AM

Dear Daniel:

I had to put the page back behind a password because it is private data. Could you please email me when you are ready to take a look at it and I'll make it accessible again?

Thanks, e

**djr33** · 06-10-2010, 01:10 AM

A couple things about the Javascript:
1. I put brackets around it. I think this may be required, but if nothing else it's more readable now.
2. You need a value for the function. In this case I'm using 'zip' (since it's the zipcode).
3. I added an example line of how you'd get the Ajax data. You'll need a real script for this though.

Code:

function getzip(zip) {
  var ajaxresult = getajaxthing('http://your.site/zip=?'+zip);
  document.GetElementById('mycitystatefield').value = ajaxresult;
}

Actually, I realize that "getzip" is an illogical name: perhaps it should be getcitystate_from_zip()

Or perhaps 'searchzip()'

Anyway, now you'll need an ajax function (a generic one is fine) that gets the results of that page using 'zip' as a get variable.
There are a few here (and many more available on google):
http://www.dynamicdrive.com/dynamicindex17/indexb.html

I don't know much about the 'best' ways to do this, but I think that the "Basic Ajax Routine" or "Dynamic Ajax Content" would both work here (if adapted a little).

**kuau** · 06-10-2010, 03:33 AM

Yikes. OK, I used the Basic Ajax Routines. The directions say this: Use Ajax Post instead of Ajax Get to send large amounts of information, or information from a FORM.

Does that mean I should change the GET to POST? I read the directions but have to go outside for a bit & will focus on it later. It's a bit over my head but I'll see what happens when I get back. Mahalo, e

**djr33** · 06-10-2010, 04:25 AM

GET is limited to something like 256 characters (based on the URL, and this varies by browser). A single zip code is MUCH shorter than that, and you have nothing to worry about.

Also, this limit is only for SENDING data, not for retrieving it. You can get as much from PHP's output as you'd like, regardless of how you ask for it.

If you can use POST, there's never any reason not to, except that in many cases it's just easier to use GET: you can add it directly to the URL rather than submitting a form.

So either way will be fine, just confirm that you have the same in both the Ajax (JS) and PHP.

**kuau** · 06-21-2010, 03:22 AM

Dear Daniel: Sorry, I got waylaid with a bunch of other stuff I had to do first. I shall return to this as soon as I can. Mahalo, e

Thread: Zipcode to City, State Fill In

Thread Tools

Search Thread

Zipcode to City, State Fill In

The Following User Says Thank You to djr33 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions