Custom Javascript to add Google Places Autocomplete to Form

sgpbyrne
Member

Hi,

I am currently trying to add a custom javascript file to my hubspot form.

This custom javascript is putting places autocomplete on 2 of the form inputs. This is working as expected but the value returned from the autocomplete gets removed from the field when you click elsewhere on the form- ie. the value is not saved to the input element.value.

Any one ever seen behaviour like this before?

Thanks

0 Upvotes
3 Replies 3
Dadams
HubSpot Employee

Hi @sgpbyrne

HubSpot forms are built using React, so depending on how the fields are being updated, you may need to manually trigger the change event for the field.

We have a few examples using jQuery for this here:

Manipulating forms with jQuery

In order to use jQuery to manipulate the values of form inputs using .val() or .prop(), you must trigger a change event using change() or trigger('change') for the change to properly register.

0 Upvotes
sgpbyrne
Member

Great, thanks for that information - worked perfectly.

0 Upvotes
apmul
Participant

Hi. I am trying to do the same thing, but am not as far along as the original poster.

 

I have a HubSpot form in place on our website, which we've been using for a couple of years. I recently obtained the Google Maps Address Predictor API. I am not entirely sure how to put them together - I'm a novice at coding but I'm good at following instructions and reverse-engineering a model.

 

Is there anyone who could share some guidance or successful examples with me to get me out of my rut?