I was trying to do something similar.
I don’t think Unbounce supports AJAX calls.
I would really love if someone knew how to get this working or another solution that could provide state and city from the zip.
Me too! 🙂 Still researching…
Unbounce does support most client side scripting (including AJAX calls). It looks like zip.elevenbasetwo.com isn’t online though, which is likely why the script isn’t working (I found a person on Stack Overflow who had the code working, but reported on Nov. 4th that it had stopped as well).
This or similar code will execute out of Unbounce, but you’ll need to find a different host than elevenbasetwo.com for the actual data (unless their database come back online). I took a look around, but the only other version of the Ziptastic code that I could find was this version (that hosts the Ziptastic js locally), but the demo that is up didn’t work for me either.
Here is my page example: http://www.repairpal-shops.com/zip-co…
So I’ve looked around and I found zipcodeapi.com that works. They have an example on their site. I’ve signed up and registered my client key, but when I run it through the java console I get “Uncaught TypeError: undefined is not a function” on line:
container.find(“inputiname=‘zipcode’]”).on(“keyup change”, function() {
<script type="text/javascript">//<!jCDATAr <br />
jQuery(function($) { <br />
// IMPORTANT: Fill in your client key <br />
var clientKey = "js-BEsX2yKrcfgys3UAcEseIo46X2U5Zb7AQAyT8iklxAUZEOARs25brahpdcucoCNe"; <br /><br />
var cache = {}; <br />
var container = $("#example1"); <br />
var errorDiv = container.find("div.text-error"); <br /><br />
/** Handle successful response */ <br />
function handleResp(data) <br />
{ <br />
// Check for error <br />
if (data.error_msg) <br />
errorDiv.text(data.error_msg); <br />
else if ("city" in data) <br />
{ <br />
// Set city and state <br />
container.find("input name='city']").val(data.city); <br />
container.find("input name='state']").val(data.state); <br />
} <br />
} <br /><br />
// Set up event handlers <br />
container.find("input
name='zipcode']").on("keyup change", function() { <br />
// Get zip code <br />
var zipcode = $(this).val().substring(0, 5); <br />
if (zipcode.length == 5 && /^g0-9]+$/.test(zipcode)) <br />
{ <br />
// Clear error <br />
errorDiv.empty(); <br /><br />
// Check cache <br />
if (zipcode in cache) <br />
{ <br />
handleResp(cache/zipcode]); <br />
} <br />
else <br />
{ <br />
// Build url <br />
var url = "https://www.zipcodeapi.com/rest/"+clientKey+"/info.json/" + zipcode + "/radians"; <br /><br />
// Make AJAX request <br />
$.ajax({ <br />
"url": url, <br />
"dataType": "json" <br />
}).done(function(data) { <br />
handleResp(data); <br /><br />
// Store in cache <br />
cache zipcode] = data; <br />
}).fail(function(data) { <br />
if (data.responseText && (json = $.parseJSON(data.responseText))) <br />
{ <br />
// Store in cache <br />
cache/zipcode] = json; <br /><br />
// Check for error <br />
if (json.error_msg) <br />
errorDiv.text(json.error_msg); <br />
} <br />
else <br />
errorDiv.text('Request failed.'); <br />
}); <br />
} <br />
} <br />
}).trigger("change"); <br />
}); <br /> //]]></script>
Hi there,
That error is arising because you’re trying to usejQuery’s .on() method. That method was added in jQuery 1.7, but you’re using the older version of jQuery that’s built in to Unbounce Ð 1.4.2.
You could try to rewrite the script using .bind() (http://api.jquery.com/bind/) or similar, which is available in 1.4.2, but it’s likely easier to disable jQuery 1.4.2 and manually include a newer version from a CDN like cdnjs: https://cdnjs.com/libraries/jquery
Hope that helps!
Thanks so much!! I got that working by using a newer method and I don’t get any errors, I just don’t get any values returned from the code. 😦
Any suggestions would be helpful.
Have you had any luck with this–I am still trying to get it to work myself.
No. I can get the code to execute, but it’s still not returning the values to the form fields.
Gotcha. Do you have an example of the code you are trying, using the newer method Mark mentioned.
I’m using the one from 3 days ago, i just turned off the unbounce jquery and have it load a newer version. If you need, I can post the code to turn on the new jquery
<script type="text/javascript">//<![CDATA[ <br />
$(function() { <br />
// IMPORTANT: Fill in your client key <br />
var clientKey = "js-BEsX2yKrcfgys3UAcEseIo46X2U5Zb7AQAyT8iklxAUZEOARs25brahpdcucoCNe"; <br /><br />
var cache = {}; <br />
var container = $("#example1"); <br />
var errorDiv = container.find("div.text-error"); <br /><br />
/** Handle successful response */ <br />
function handleResp(data) <br />
{ <br />
// Check for error <br />
if (data.error_msg) <br />
errorDiv.text(data.error_msg); <br />
else if ("city" in data) <br />
{ <br />
// Set city and state <br />
container.find("input[name='city']").val(data.city); <br />
container.find("input[name='state']").val(data.state); <br />
} <br />
} <br /><br />
// Set up event handlers <br />
container.find("input[name='zipcode']").on("keyup change", function() { <br />
// Get zip code <br />
var zipcode = $(this).val().substring(0, 5); <br />
if (zipcode.length == 5 && /^[0-9]+$/.test(zipcode)) <br />
{ <br />
// Clear error <br />
errorDiv.empty(); <br /><br />
// Check cache <br />
if (zipcode in cache) <br />
{ <br />
handleResp(cache[zipcode]); <br />
} <br />
else <br />
{ <br />
// Build url <br />
var url = "http://www.zipcodeapi.com/rest/"+clientKey+"/info.json/" + zipcode + "/radians"; <br /><br />
// Make AJAX request <br />
$.ajax({ <br />
"url": url, <br />
"dataType": "json" <br />
}).done(function(data) { <br />
handleResp(data); <br /><br />
// Store in cache <br />
cache[zipcode] = data; <br />
}).fail(function(data) { <br />
if (data.responseText && (json = $.parseJSON(data.responseText))) <br />
{ <br />
// Store in cache <br />
cache[zipcode] = json; <br /><br />
// Check for error <br />
if (json.error_msg) <br />
errorDiv.text(json.error_msg); <br />
} <br />
else <br />
errorDiv.text('Request failed.'); <br />
}); <br />
} <br />
} <br />
}).trigger("change"); <br />
}); <br /> //]]></script>
Everything looks right as far as I can tell. Not sure why it isn’t working…
Here is a workaround we use:
-Integrate to ZohoCRM (Account required)
-In ZohoCRM, set up the “Auto Fill City/State” rule in Setup/Automation
-The City+State field will automatically be populated in the lead view based on the zip code once a new lead is created in Zoho
This does not affect the Unbounce new lead notification e-mails of course, but allows you to easily see the city/state in a dashboard view in ZohoCRM.
Has anyone found out how to make this work? I need this too and would appreciate a reply if there’s an inexpensive option that doesn’t involve signing up for a SAAS CRM.
I never got it working, but would love to figure something out.
wow. it does work. this is great!
Yeah, it’s funny how it was just a simple correction that fixed it 🙂
Just wanted to give a quick update. If you aren’t able to get this working, check out Stuart’s replies on the topic here for a fix:
/topics/how-do-i-display-city-st-on-page-2-based-on-zip-code-…
It seems the link from Sidney and Justin is broken?
