Hi everyone,
My name is Edward and I have question about AJAX, JSON, and google geocode. I have an assignment to create a webpage that has following text fields: name, street address, zip code, city, and state. The goal of this assignment is that when I fill the zip code-text field, the city and state will be automatically filled. For example, when I fill the zip-code with 94568, then the city will be Dublin, and the state will be CA. I don't know how can I connect the google geocode using the AJAX. Here is what I got so far:
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Homework 4</title>
<script type = "text/JavaScript" src ="http://maps.googleapis.com/maps/api/json?sensor=false">
function fillCityState(zip){
if(document.getElementById("city").value !=""){
return false;
}
var xhr = new XMLHttpRequest();
xhr.open("GET","http://maps.googleapis.com/maps/api/json?zip="+zip.value,true);
if(xhr.readyState == 4){
var result = xhr.responseText;
document.getElementById("city").value = result[0];
document.getElementById("state").value = result[1];
}
xhr.send(null);
}
</script>
</head>
<body>
<form method = "get">
<table>
<tr><td>Name:</td><td>
<input type = "text" name = "username"/></td></tr>
<tr><td>Street Address:</td><td>
<input type = "text" name = "address"/></td></tr>
<tr><td>Zip Code:</td><td>
<input type = "text" name = "zipCode" onblur="fillCityState(this.value)"/></td></tr>
<tr><td>City:</td><td>
<input type = "text" name = "city" id = "city"/></td></tr>
<tr><td>State:</td><td>
<input type = "text" name = "state" id = "state"/></td></tr>
</table>
</form>
</body>
</html>Could anybody help me? Anyway this assignment has been submitted already, so I am asking this just for learning.
Regards
Edward