Question

Trying to Add Javascript to Filter Applicable City and Zip - No Javascript knowledge

  • 9 January 2024
  • 1 reply
  • 23 views

Badge

Hello all. 

I am currently building a lead form that needs 3 new fields than usual. (I usually just duplicate old landing pages and utilize those already built lead forms). This one needs to have the new fields of State, City, and Zipcode. Due to our leads needing a location attached to them (we are an in-person education service), I thought the best course of action was to have the city and zips filter out based on the previous fields choice. I added the pre-made state field and the following script that ChatGPT helped me with: 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script>
var jq = jQuery.noConflict();
jq(document).ready(function() {
  // Fetch cities based on selected state
  jq("#state").change(function() {
    var stateCode = jq(this).val();
    if (stateCode) {
      jq.ajax({
        url: "https://api.zippopotam.us/" + stateCode,
        type: "GET",
        success: function(data) {
          var cities = data.places;
          var cityField = jq("[id='cityfield']");
          cityField.empty();
          jq.each(cities, function(index, city) {
            cityField.append(new Option(city["place name"], city["place name"]));
          });
        }
      });
    }
  });

  // Fetch zip codes based on selected state and city
  jq("[id='cityfield']").change(function() {
    var stateCode = jq("#state").val();
    var city = jq(this).val();
    if (stateCode && city) {
      jq.ajax({
        url: "https://api.zippopotam.us/" + stateCode + "/" + city,
        type: "GET",
        success: function(data) {
          var zipCodes = data["post codes"];
          var zipCodeField = jq("[id='zipcodefield']");
          zipCodeField.empty();
          jq.each(zipCodes, function(index, zipCode) {
            zipCodeField.append(new Option(zipCode, zipCode));
          });
        }
      });
    }
  });
});
</script>

Please no negativity on me utilizing a ChatGPT built script. I have no java knowledge and I am doing my best with the resources I have. Just a wee girl trying to learn things and do it her da*n self. All the field IDs match with the above and there is another script on the page already (reflected in first row). 

After adding this, and publishing the page to test… I cannot drop down the State or Zipcode fields in the lead form. Furthermore, one request I had for ChaptGPT was to access an API or CRM that was free. I don’t mind creating an account, but I need a free resource. Zippopotam was that resource, and I didn’t see anything on the site about logging in to get the API key. 

Any advice, next steps, troubleshooting I can do will be greatly appreciated. TYIA!


1 reply

Userlevel 7
Badge +3

Hi @ghalewrk00

I don’t have much time to get into your particular code and just based off of experience, chatGPT is a great starting point but it’s a bit more complicated to adjust the necessary code to work with Unbounce. 

However, just a quick look at the API you are trying to use shows me that the underlying GitHub repo hasn’t been updated in over 11 years. The demo page they have also doesn’t seem to work. 

I’m afraid no one is supporting this API anymore and that’s why it’s failing. 

Most zip code APIs I’ve come across are paid and depending on the number of look ups you need, might get pretty expensive. 

Reply