I would really appreciate it if I could get some help with the following,
On the landing page, there is a form where the user can input an address. After having typed the address, Google Place Autocomplete gives some suggestions. I would like to make it mandatory for the user to choose one of the suggestions before being able to submit the form. If they don’t choose an option from the dropdown menu, I would like a message to pop up asking the user to choose one of the options. I have included a picture of a website with the function I would like to add.
Are you trying to prevent visitors from entering unverified addresses?
The easiest way to do that is probably to separate your autocomplete field from the actual form field you’re submitting. I’d arrange the form as three fields-
Autocomplete field, where the user types, and the autocomplete happens. This field serves no other purpose and does not even need to be submitted with the form data. Name it ignore or something.
Address field, which is marked readonly by script. The user cannot type here but they can see the results. This field is also marked required so it must be populated before the form can submit.
You # Bedrooms and any other fields.
When the user is interacting with field #1, and selects an address from the dropdown, the autocomplete’s place_changed event fires, and you can then-
Populate the Address field
Clear the Autocomplete field
Now the form is submittable, and it will only contain content that was in Google’s autocomplete list.
