HOW TO auto fill State and Country based on City using Javascript
The quick & dirty Javascript code below is based on the idea by Jason Hunt that makes use of Yahoo! Maps Web Services - Geocoding API
It works only in IE 5 or higher (untested in IE 7).
The Geocoding Web Service is actually meant to find the specific latitude and longitude for an address but we shall use the state and country that it also returns. If there are multiple cities with the same name, the first set of values returned by the web service are considered.
[ Code formatted with Thomas Johansen's utility. ]
It works only in IE 5 or higher (untested in IE 7).
The Geocoding Web Service is actually meant to find the specific latitude and longitude for an address but we shall use the state and country that it also returns. If there are multiple cities with the same name, the first set of values returned by the web service are considered.
<HTML>
<HEAD>
<TITLE> Auto fill State and Country based on City </TITLE>
<SCRIPT LANGUAGE="JavaScript">
function getStateCountry()
{
var sUrl = "http://api.local.yahoo.com/MapsService/V1/geocode?appid=YahooDemo";
sUrl += "&city=" + crmForm.address1_city.value;
var oXmlHTTP = new ActiveXObject("Msxml2.XMLHTTP");
oXmlHTTP.Open("GET", sUrl, false);
oXmlHTTP.Send();
var oXmlDoc = oXmlHTTP.responseXML;
crmForm.address1_stateorprovince.value = oXmlDoc;
if (oXmlDoc.selectSingleNode("ResultSet/Result").getAttribute("precision") == "city")
{
crmForm.address1_stateorprovince.value = oXmlDoc.selectSingleNode("ResultSet/Result/State").text
crmForm.address1_country.value = oXmlDoc.selectSingleNode("ResultSet/Result/Country").text
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM METHOD=POST name="crmForm">
City: <INPUT TYPE="text" NAME="address1_city" onblur="getStateCountry()"><BR>
State: <INPUT TYPE="text" NAME="address1_stateorprovince"><BR>
Country: <INPUT TYPE="text" NAME="address1_country"><BR>
</FORM>
</BODY>
</HTML>
[ Code formatted with Thomas Johansen's utility. ]
Comments
Post a Comment