<body><script type="text/javascript"> function setAttributeOnload(object, attribute, val) { if(window.addEventListener) { window.addEventListener('load', function(){ object[attribute] = val; }, false); } else { window.attachEvent('onload', function(){ object[attribute] = val; }); } } </script> <div id="navbar-iframe-container"></div> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <script type="text/javascript"> gapi.load("gapi.iframes:gapi.iframes.style.bubble", function() { if (gapi.iframes && gapi.iframes.getContext) { gapi.iframes.getContext().openChild({ url: 'https://www.blogger.com/navbar.g?targetBlogID\x3d8211560\x26blogName\x3dTech+Tips,+Tricks+%26+Trivia\x26publishMode\x3dPUBLISH_MODE_BLOGSPOT\x26navbarType\x3dBLUE\x26layoutType\x3dCLASSIC\x26searchRoot\x3dhttp://mvark.blogspot.com/search\x26blogLocale\x3den\x26v\x3d2\x26homepageUrl\x3dhttp://mvark.blogspot.com/\x26vt\x3d-5147029996388199615', where: document.getElementById("navbar-iframe-container"), id: "navbar-iframe" }); } }); </script>

Tech Tips, Tricks & Trivia

by 'Anil' Radhakrishna
An architect's notes, experiments, discoveries and annotated bookmarks.

Search from over a hundred HOW TO articles, Tips and Tricks

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.

<TITLE> Auto fill State and Country based on City </TITLE>
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);

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

<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>

[ Code formatted with Thomas Johansen's utility. ]

Labels: ,

Tweet this | Google+ it | Share on FB

« Home | Next »
| Next »
| Next »
| Next »
| Next »
| Next »
| Next »
| Next »
| Next »
| Next »


Post a Comment