Google Location API Script Issues with Form Submit

Hi all –

We are experiencing failed form submits when implementing a javascript to enriching/populating hidden fields City and State with Google’s location API and submitting only when those fields are not empty.

Background Details - Form Fields:

We have forms on our Unbounce pages with these visible fields:

Name

Email

Postal Code

Country (picklist)

And these hidden fields (to be populated by a call from a script on the page):

City

State

Background Details - Javascript :

On the event that form fields Postal Code >= 5 AND Country is not empty THEN domain script calls Google’s location API to get City and State to populate the forms hidden fields City and State enriching our geographic information capture with less fields.

On the event that the user tries to submit the form, the domain script checks if the hidden fields City and State are populated. If they are not, domain script doesn’t submit the form. If they are, then domain script submits the form. This is done with “promises” according to our developer.

Background Details - Unbounce Form Confirmation Set Up :

Defined in within Unbounce on the page in the landing page builder setup, the Form Confirmation Settings are “Post Form Date to a URL” which submits a Pardot form submission and redirects them to a thank you page.

Issue - Details :

I was testing a new script with one of our developers (SEE BELOW FOR THE SCRIPTS). We were not having any console errors. The only issue was when submitting test form fillouts we were not being taken to the thank you / confirmation page but to a blank page with the text “{“protected_assets”:{}}”.

The form as well was not posting the form data to the URL like we have defined on the page in Unbounce.

This means no submissions were going to Unbounce and no submissions were going to Pardot.

We are getting errors randomly after form submission of Unbounce forms. Occasionally we will not be redirected to a confirmation/thank you page but getting a blank page with the text {“protected_assets”:{}}.

Thanks!

VARIANT SCRIPT - JAVASCRIPT ADDED TO LANDING PAGE MANUALLY (NOT THROUGH SCRIPT MANAGER)
Placement “Head”

DOMAIN SCRIPT - USED IN SCRIPT MANAGER ACROSS ALL PAGES IN THE HEXARMOR UNBOUNCE CLIENT
Placement “Before Body End Tag”

Description: Using to enrich forms. Before form submit AND when Postal Code and Country are filled out, call to google’s location api and populate the City and State hidden form fields THEN submit form

(document).ready(function() { (‘form’).on(‘submit’, function(event) {
event.preventDefault();

getResponse($('form'), event)
  .then(getCityState)
  .then(submitForm)

})
})

function getResponse (myForm, event) {
return new Promise ((resolve) => {
var apiKey = ‘Our_API_Key_Here’;
var baseUrl = https://maps.googleapis.com/maps/api/geocode/json?&key=;
var countryCode = ('#Country option:selected').val(); var postalCode = (’#PostalCode’).val();
var componentFilter = &components=country:${ countryCode }|postal_code:${ postalCode }&;
var date = new Date();
var dateTime = &_=${ date.getTime() };
var url = baseUrl + apiKey + componentFilter + dateTime;

$.support.cors = true;
$.ajaxSetup({ cache: false });
$.getJSON(url).done(function(response) {
  var getStatus = response.status;

  // console.log(`getStatus: ${ getStatus }`);
  if (getStatus === 'OK') {
    var data = {
      addressComponents: response.results[0].address_components,
      event: event
    }
    resolve(data);
  }
});

})
}

function getCityState (data) {
return new Promise ((resolve) => {
var city, state, nbhd, subLoc = ‘’;
var hasCity, hasPostalTown, hasSubLoc = false;
var addressComponents = data.addressComponents;

$.each(addressComponents, function(index, addressComponent) {
  var types = addressComponent.types;
  $.each(types, function(index, type) {
    switch(type) {
      case 'postal_town':
        postalTown = addressComponent.long_name;
        hasPostalTown = true;
        break;
      case 'locality':
        city = addressComponent.long_name;
        hasCity = true;
        break;
      case 'sublocality':
        subLoc = addressComponent.long_name;
        hasSubLoc = true;
        break;
      case 'neighborhood':
        nbhd = addressComponent.long_name;
        break;
      case 'administrative_area_level_1':
        state = addressComponent.short_name;
        break;
    }
  });
});

// set the city
if(hasPostalTown) {
  $('#City').val(postalTown);
} else if(hasCity) {
  $('#City').val(city);
} else if(hasSubLoc) {
  $('#City').val(subLoc);
} else {
  $('#City').val(nbhd);
}

// set the state
$('#State').val(state);
// reset flags
hasCity = false;
hasPostalCode = false;
hasSubLoc = false;
resolve(data);

})
}

function submitForm(data) {
data.event.currentTarget.submit();
}

UNBOUNCE FORM COMFIRMATION SETTINGS

Confirmation:
Post form data to a URL

URL:
Our_URL_Here

Target:
Same tab or window