Hey all I have seen a lot of the forms you fill out where you start typing your address and it shows a list of available addresses as you type.
How can I achieve this in treepls forms?
example
Amazing I asked AdamGPT and he gave me the code and how to do it in google cloud etc
How will this go into the portal and a payment form? will I have dramas?
@luke Can you share the code you got?
Hi @luke
Address autocomplete functionality uses the Google Places API (so you’ll need a Google Dev account and create an API key, etc) and it can then be set up with Javascript.
There are documentation and code samples in Google’s API docs:
The sample you were provided will probably work too, but again you’ll need your own API key.
1 Like
Sure, this is what I basically got from chatGPT.
<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=places&callback=initAutocomplete"></script>
<script>
function initAutocomplete() {
var input = document.getElementById('Address');
var options = {
bounds: new google.maps.LatLngBounds(
new google.maps.LatLng(-27.5, 153.03), // South West
new google.maps.LatLng(-26.3, 153.6) // North East
)
};
var autocomplete = new google.maps.places.Autocomplete(input, options);
}
document.addEventListener("DOMContentLoaded", initAutocomplete);
</script>
and this is what I ended up with after I asked to combine it all.
<script src="https://maps.googleapis.com/maps/api/js?key=API_KEYY&libraries=places&callback=initAutocomplete"></script>
<script>
function initAutocomplete() {
var input = document.getElementById('Address');
var options = {
bounds: new google.maps.LatLngBounds(
new google.maps.LatLng(-27.5, 153.03), // South West
new google.maps.LatLng(-26.3, 153.6) // North East
)
};
var autocomplete = new google.maps.places.Autocomplete(input, options);
}
document.addEventListener("DOMContentLoaded", initAutocomplete);
'use strict';
grecaptcha.ready(function () {
function e(a) {
grecaptcha.execute("{{this.recaptcha_sitekey}}", {
action: 'General_form_{{this.Alias | replace: "-","_"}}'
}).then(function (b) {
document.querySelector(".g-recaptcha-response-v3-{{this.Alias}}").value = b;
a && a()
})
}
window.customFormSubmit = new Event("customFormSubmit");
let a = document.querySelector(".g-recaptcha-response-v3-{{this.Alias}}").closest("form");
if (null != a) {
let d = !0,
b = 0,
c = document.getElementById("paymentFields_" + a.getAttribute("name"));
a.onsubmit = function (f) {
f.preventDefault();
if (!a.classList.contains("form-validation-error")) {
if (d) return b++, d = !1, a.CMS_CustomSubmit = new Event("CMS_CustomSubmit", {
cancelable: !0
}), e(function () {
c ? "true" === c.dataset.paymentEnabled ? (a.dispatchEvent(window.customFormSubmit), b = 0, d = !0) : a.dispatchEvent(window.customFormSubmit) : (a.CMS_CustomSubmit.data = {
form: a
}, a.dispatchEvent(a.CMS_CustomSubmit))
}), !1;
0 < b && b++;
if (1 < b) return alert("Form submission is in progress."), !1
}
};
c || a.addEventListener("CMS_CustomSubmit", function (c) {
c.defaultPrevented ? (b = 0, d = !0) : a.submit()
})
} else e()
});
</script>
<input type="hidden" class="g-recaptcha-response-v3-{{ this.Alias }}" name="g-recaptcha-response-v3">
<input class="btn btn-primary" type="submit" value="Submit">
Not sure if you will be able to see it but here is the conversation.
1 Like