I’m creating some Javascript code for a customer who has around 50 landing pages. They all use one of four different templates. Each template has at least two forms on it. Usually it’s a matter of one form being displayed at the top of the page, then another form can be opened in a modal window. They both show as the same to the end user, they’re basic contact forms.
I’m trying to implement Google Places address auto-complete, but I can only get the auto-complete to work on the first form in the page. And I’d also like to get it so any edit in any field in either form gets written to the other form. So if they enter their first name in the main form, then open the modal, their first name will display there, and say they typo’d their first name and correct it in the modal form, the change also takes place in the main form.
Any suggestions are greatly appreciated.
Steve
If you have a main form and a modal form on the same page and need both to feature Google Places Autocomplete with mirrored fields, simply assign each address input its own Autocomplete instance and include an input event that mirrors any user entry—typed or selected—into the corresponding field of the other form.
I recommend setting it up as a template or incorporating it into a module that generates custom IDs for the selected forms, rather than implementing a global solution, to avoid potential conflicts with future forms.
<script>
function initAutocomplete() {
// 1. Select all inputs in all forms
const allInputs = document.querySelectorAll('.myForm input');
// 2. Initialize Autocomplete on every "address" field
allInputs.forEach(input => {
if (input.name === 'address') {
new google.maps.places.Autocomplete(input, { types: ['address'] });
}
});
// 3. Group inputs by their name (e.g. "address", "firstName", etc.)
const fieldsByName = {};
allInputs.forEach(input => {
if (!fieldsByName[input.name]) {
fieldsByName[input.name] = [];
}
fieldsByName[input.name].push(input);
});
// 4. Add 'input' listeners so a change in one field updates all fields with the same name
Object.keys(fieldsByName).forEach(name => {
fieldsByName[name].forEach(field => {
field.addEventListener('input', () => {
// Copy the new value to every other field with the same name
fieldsByName[name].forEach(otherField => {
if (otherField !== field) {
otherField.value = field.value;
}
});
});
});
});
}
</script>
This works great for getting all the fields to echo their data to all like fields, except for the address field. Autocomplete is still only assigned to the first form’s address field, and when it changes, the other forms’ address fields aren’t updated. When you update one of the other address fields, that new value is written to the first form, overwriting any address that was put there by the autocomplete.