Page 1 of 1

Ajax+registration forum=autofill city/state

Posted: Sat Aug 12, 2006 11:42 am
by matt1019
hi guys,

I am trying to implement ajax into my registration page....

this is how it is setup:

registration.php
==>has the input field where user types in the zipcode:
==>triggers the checkzip function, and the city and state fields should be "automatically" filled (if zip is correct)


registration.php source:

Code: Select all

<form name='inputform' method='post' action='".PHP_SELF."' onSubmit='return ValidateForm(this)'>
...
...
...
<tr>
<td class='tbl'>Zip-Code:&nbsp;</td>
<td class='tbl'><input id=\"zip\" name=\"zip\" type=\"text\" onkeyup=\"checkZip();\" maxlength='5' style='width:43px;'/>
</td>
</tr>
<div id=\"zipResult\">
<tr>
<td class='tbl'>City:&nbsp;</td>
<td class='tbl'><input id=\"city\" name=\"city\" type=\"text\" autocomplete='off' maxlength='250' class='textbox' style='width:200px;'>
</td>
</tr>
<tr>
<td class='tbl'>State:&nbsp;</td>
<td class='tbl'><input id=\"state\" name=\"state\" type=\"text\" maxlength='2' class='textbox' style='width:20px;'>
</td>
</tr>
</div>
...
...
...
</form>
... = other fields

at the top of the registration.php file, i have include statement to include the libraries.

@top of registration.php page

Code: Select all

echo "<script src=\"includes/prototype.js\" language=\"JavaScript\" type=\"text/javascript\"></script>
<script src=\"includes/jscript.js\" language=\"JavaScript\" type=\"text/javascript\"></script>";
the checkZip function resides in jscript.js

This is what the function does:

jscript.js source

Code: Select all

function checkZip() {
if($F('zip').length == 5) {
var url = 'checkZip.php';
var params = 'zip=' + $F('zip');
var ajax = new Ajax.Updater(
{success: 'zipResult'},
url,
{method: 'get', parameters: params, onFailure: reportError});
}
}
function reportError(request) {
$F('zipResult') = "Error";
}
This calls yet another page called "checkZip.php"
and has the following contents:

checkZip.php page source

Code: Select all

<?php

include "maincore.php";

  $zipcode = $_GET['zip']; // The parameter passed to us
  $queryx = dbquery("SELECT city,state FROM zipcodes WHERE zip='$zipcode'");
  $result = dbarray($queryx);

if ($result['city']!='' && $result['state']!='') {
	$city = $result['city'];
	$state = $result['state'];

	echo "<div class=\"goodzip\">";
	echo $city.",&nbsp;&nbsp;";
	echo $state;
	echo "</div>";
}else{
	echo "<div class=\"badzip\">";
	echo "Zip Code [$zipcode] Not Found.";
	echo "</div>";
}
?>
Ok, so here's the punchline: The two fields below the zipcode fileds do not get automatically filled!! (i even tried giving DOM IDs... as you can see from the code in registration.php page)

However, since I have made the

Code: Select all

<div id=\"zipResult\">
statement, the city and zip are shown in the middle of the page :?

Basically, the whole darn thing works just fine... the only glitch is that it does not fill the city and state fields....

Any advice/help would be much appreciated! :P

-Matt

Posted: Sat Aug 12, 2006 5:45 pm
by matt1019
PHewww!!!

Ok guys, after searching and searching.... and more searching, found a "better" alternative to what I was doing before.

No, I still be using AJAX :)
but with less fluff.

Here's the link to the site, I graciously present ;)

:arrow: :arrow: http://www.cricketschirping.com/weblog/?p=637

Much better example, and I learned more than what I learned from the previous example.

Only one problem though. This uses a CSV file instead of doing the mySQL Lookup.

I wonder if it can be converted by someone to actually access the mysql database than the CSV file... just for the sake of "keeping everything in order"'s sake.

Here's the PHP File that parses the CSV file and does all the lookups:

Code: Select all

<?php
function CSV2Array($openFile, $columnsOnly = false)
{
   $handle = fopen ($openFile,"r");

   $rows = 0;
   while (!feof($handle)) {
       $columns[] = explode(",", fgets($handle, 4096));
       if ($rows++ == 0 && $columnsOnly)
           break;
   }
   fclose ($handle);
   return $columns;
}
?>

<?php 
$queryZip = $_REQUEST["zip"];

$zips = CSV2Array("ZIP_CODES.txt", false);
$city = "unknown";
$state = "unknown";

for ($i=0; $i < count($zips); $i++) {
	if ($zips[$i][0] == $queryZip) {
		$city=$zips[$i][3];
		$state=$zips[$i][4];
		break;
	}
//	print($zips[$i][0] . "<br/>");
}

?>

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

city.value = "<?php print($city) ?>";
state.value = "<?php print($state) ?>";

toggleCityStateEnabled();

Hope this proves to be a much resourceful link to everyone.

-Matt