Populate fields using querySelector function
Split Fields User InterfaceMost of our code examples use the ID of a form input field to populate data when an address is autocompleted. However, not all forms use "IDs" to Identify fields. In this example we use the querySelector function to identify the fields and populate the data. In this case we use the field's name to identify the fields.
See the Pen Populate fields using querySelector function by Addressfinder (@addressfinder) on CodePen.
Related code examples
-
Canadian checkout demo - Shows a simple checkout page, configured for capturing a Canadian address. The autocomplete widget provides the search capability and the selected address elements are populated into the relevant form fields.#International #Split Fields
-
Custom styling: Fixed width adjustment - The example of the AddressFinder widget has the manual styling feature turned on. This enables the styling to be set by the customer rather than using the default style. When you make a search, the address results in this example will span to the width of the input element instead of the variable width option the widget usually returns.#Styling #User Interface
-
Manual address entry - Autocomplete only for street name, suburb and city/town. It also collects coordinates for the location. All other fields must be entered manually.#GPS #Location #Manual #Split Fields #Street
-
Split address into seperate fields - The address is split into seperate fields (unit number, property number, street etc).#Metadata #Split Fields