These examples use javascript on the user's browser and require a javascript client key, which is different from your application key. This is to protect your account. Click here to set up your javascript client key.
This example auto-fills the city and state after a zip code is entered.
If you use the example JavaScript, you must update it with your client key (starts with js-
) and update it to match the DOM elements on your website.
<script>//<![CDATA[ window.addEventListener('DOMContentLoaded', function() { // IMPORTANT: Fill in your client key var clientKey = "FILL_IN_CLIENT_KEY"; var cache = {}; var container = $("#example1"); var errorElem = container.find(".label-error"); /** Handle successful response */ function handleResp(data) { // Check for error if (data.error_msg) errorElem.text(data.error_msg); else if ("city" in data) { // Set city and state container.find("input[name='city']").val(data.city); container.find("input[name='state']").val(data.state); } } // Set up event handlers container.find("input[name='zipcode']").on("keyup change", function() { // Get zip code var zipcode = $(this).val().substring(0, 5); if (zipcode.length == 5 && /^[0-9]+$/.test(zipcode)) { // Clear error errorElem.empty(); // Check cache if (zipcode in cache) { handleResp(cache[zipcode]); } else { // Build url var url = "http://www.zipcodeapi.com/rest/"+clientKey+"/info.json/" + zipcode + "/radians"; // Make AJAX request $.ajax({ "url": url, "dataType": "json" }).done(function(data) { handleResp(data); // Store in cache cache[zipcode] = data; }).fail(function(data) { if (data.responseText && (json = $.parseJSON(data.responseText))) { // Store in cache cache[zipcode] = json; // Check for error if (json.error_msg) errorElem.text(json.error_msg); } else errorElem.text('Request failed.'); }); } } }).trigger("change"); }); //]]></script>
This example auto-fills the city and province after a Canadian postal code is entered.
If you use the example JavaScript, you must update it with your client key (starts with js-
) and update it to match the DOM elements on your website.
<script>//<![CDATA[ window.addEventListener('DOMContentLoaded', function() { // IMPORTANT: Fill in your client key var clientKey = "FILL_IN_CLIENT_KEY"; var cache = {}; var container = $("#caPostalAutofill"); var errorElem = container.find(".label-error"); /** Handle successful response */ function handleResp(data) { // Check for error if (data.error_msg) errorElem.text(data.error_msg); else if ("city" in data) { // Set city and province container.find("input[name='caCity']").val(data.city); container.find("input[name='caProvince']").val(data.province); } } // Set up event handlers container.find("input[name='caPostalCode']").on("keyup change", function() { // Get postal code var postalCode = $(this).val().toUpperCase(); if (/^[A-Z][0-9][A-Z] ?[0-9][A-Z][0-9]$/.test(postalCode)) { // Clear error errorElem.empty(); // Check cache if (postalCode in cache) handleResp(cache[postalCode]); else { // Build url removing space in postal code var url = "http://www.zipcodeapi.com/rest/v2/CA/" + clientKey + "/info.json/" + postalCode.replace(/ /g, "") + "/radians"; // Make AJAX request $.ajax({ "url": url, "dataType": "json" }).done(function(data) { handleResp(data); // Store in cache cache[postalCode] = data; }).fail(function(data) { if (data.responseText && (json = $.parseJSON(data.responseText))) { // Store in cache cache[postalCode] = json; // Check for error if (json.error_msg) errorElem.text(json.error_msg); } else errorElem.text('Request failed.'); }); } } }).trigger("change"); }); //]]></script>
This example determines the distance between two zip code that are entered.
<script type="text/javascript">//<![CDATA[ window.addEventListener('DOMContentLoaded', function() { // IMPORTANT: Fill in your client key var clientKey = "FILL_IN_CLIENT_KEY"; var cache = {}; var container = $("#example2"); var errorElem = container.find(".label-error"); /** Handle successful response */ function handleResp(data) { // Check for error if (data.error_msg) errorElem.text(data.error_msg); else if ("distance" in data) { // Show div container.find("div.distance").show() // Set distance .find("span.distance").text(data.distance + " miles"); } } // Set up event handlers container.find("input[name='zipcode1'],input[name='zipcode2']").on("keyup change", function() { // Get zip code var zipcode1 = $("input[name='zipcode1']").val().substring(0, 5); var zipcode2 = $("input[name='zipcode2']").val().substring(0, 5); if (zipcode1.length == 5 && /^[0-9]+$/.test(zipcode1) && zipcode2.length == 5 && /^[0-9]+$/.test(zipcode2)) { // Clear error errorElem.empty(); // Check cache var cacheKey = zipcode1 + '-' + zipcode2; if (cacheKey in cache) { handleResp(cache[cacheKey]); } else { // Build url var url = "http://www.zipcodeapi.com/rest/"+clientKey+"/distance.json/" + zipcode1 + "/" + zipcode2 + "/mile"; // Make AJAX request $.ajax({ "url": url, "dataType": "json" }).done(function(data) { handleResp(data); // Store in cache cache[cacheKey] = data; }).fail(function(data) { if (data.responseText && (json = $.parseJSON(data.responseText))) { // Store in cache cache[cacheKey] = json; // Check for error if (json.error_msg) errorElem.text(json.error_msg); } else errorElem.text('Request failed.'); }); } } }).trigger("change"); }); //]]></script>