Addressfinder

The best way to find exact addresses in New Zealand

  • Skip to Main Navigation
  • Skip to Footer Sitemap
  • Skip to Top
  • Pricing
  • Features
    • Autocomplete
      Search addresses and locations as you type
    • Bulk Cleansing
      Verify a database of addresses
    • Geocode Addresses
      Collect addresses and GPS coordinates together
    • Bounding Box
      Collect all addresses within a defined area
    • MORE FEATURES
  • About us
  • Case studies
  • FAQ
  • Contact
  • Blog
  • JavaScript widget docs
  • API developer docs
  • Pricing
  • Features
    • Autocomplete
      Search addresses and locations as you type
    • Bulk Cleansing
      Verify a database of addresses
    • Geocode Addresses
      Collect addresses and GPS coordinates together
    • Bounding Box
      Collect all addresses within a defined area
    • MORE FEATURES
  • More
    • Company & product
      • About Us
      • Case Studies
      • FAQ
      • Partners
      • Blog
      Contact Us
    • Integrations
      • Magento
      • WooCommerce
      • BigCommerce
      • Salesforce
      • Shopify Plus
      See all integrations
    • JavaScript widget docs
      • Integration Guide
      • Widget Code Generator
      • Widget Reference
      • Code Examples
      See all JavaScript docs
    • API developer docs
      • Address Autocomplete
      • Address Metadata
      • Address Verification
      • API Errors
      See all API docs
  • Login
  • Code Examples
  • Populate fields using querySelector function

Populate fields using querySelector function

Split Fields User Interface

Most 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

  1. 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

  2. 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

  3. Form without address line 2 - The example shows the basic use case of the AddressFinder widget but on a form that has fewer address fields. This form only has one "address line" so the widget has been modified to combine the 'Address_Line_1' and 'Address_Line_2' elements when populating the content into the appropriate field.
    #DOM #Logic #Split Fields #Street

  4. 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

  5. Split address into seperate fields - The address is split into seperate fields (unit number, property number, street etc).
    #Metadata #Split Fields

Addressfinder logo
Addressfinder provides speedy, accurate and dependable address autocompletion at a fair price. Easily integrate our address finder software with your site to start enjoying our address verification, address autocomplete and other address services today.

Sitemap

  • Home
  • About
  • Contact
  • Blog
  • FAQ
  • Pricing
  • Case Studies
  • Status Page
  • Privacy Policy
  • Terms & Conditions
  • Features
  • Address Metadata
  • Bulk Cleansing
  • Geocode Addresses
  • Reverse Address Lookup
  • Points of Interest
  • Street, Suburb & City Search
  • Bounding Box Search
  • Postcode Finder
  • Address Verification
  • Integrations
  • WooCommerce
  • BigCommerce
  • Shopify Plus
  • Magento
  • Salesforce
  • Spiffy Stores
  • iOS
  • Ruby
  • HubSpot
  • Drupal
  • Microsoft Dynamics 365
  • Vue
  • Gravity Forms
  • React
  • API Documentation
  • Address Autocomplete
  • Address Metadata
  • Address Verification
  • API Errors
  • Another 6 APIs
  • AU APIs specs
  • International APIs
  • Widget Documentation
  • Integration Guide
  • International Integration Guide
  • Code Generator
  • Code Examples
  • Javascript Reference
Addressfinder is also available in Australia
Terms and Conditions | Privacy
Copyright © 2022 Addressfinder, New Zealand