Ajax+registration forum=autofill city/state
Posted: Sat Aug 12, 2006 11:42 am
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:
... = other fields
at the top of the registration.php file, i have include statement to include the libraries.
@top of registration.php page
the checkZip function resides in jscript.js
This is what the function does:
jscript.js source
This calls yet another page called "checkZip.php"
and has the following contents:
checkZip.php page source
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 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!
-Matt
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: </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: </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: </td>
<td class='tbl'><input id=\"state\" name=\"state\" type=\"text\" maxlength='2' class='textbox' style='width:20px;'>
</td>
</tr>
</div>
...
...
...
</form>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>";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";
}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.", ";
echo $state;
echo "</div>";
}else{
echo "<div class=\"badzip\">";
echo "Zip Code [$zipcode] Not Found.";
echo "</div>";
}
?>However, since I have made the
Code: Select all
<div id=\"zipResult\">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!
-Matt