Form to collect shipping and payment addresses

Here's a sample code that shows how to create an address collection form to get postcode, city, street, house number from a customer.

by Geoapify

HTML

<script src="https://unpkg.com/@geoapify/[email protected]/dist/index.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@geoapify/[email protected]/styles/round-borders.css">
<div class="address-collection-container">
  <div class="address-row">
    <div class="address-field-with-label margin-right">
      <label for="postcode">Postleitzahl:</label><br>
      <div id="postcode" class="address-field autocomplete-container small-input"></div>
    </div>

    <div class="address-field-with-label main-part">
      <label for="city">Stadt:</label><br>
      <div id="city" class="address-field autocomplete-container"></div>
    </div>
  </div>
  <div class="address-row">
    <div class="address-field-with-label main-part">
      <label for="street">Straße:</label><br>
      <div id="street" class="address-field autocomplete-container"></div>
    </div>
  </div>
 
  <div class="address-row">
    <div class="address-field-with-label margin-right">
      <label for="housenumber">Hausnummer:</label><br>
      <input id="housenumber" class="geoapify-autocomplete-input small-input"/>
    </div>
    <div class="address-field-with-label main-part">
      <label for="app">Appartement, Suite (optional):</label><br>
      <input id="app" class="geoapify-autocomplete-input"/>
    </div>
  </div>
  <div id="message" class="message-container"></div>
  <div class="button-container"><button onclick="checkAddress()">Check address</button></div>
</div>

CSS

.address-collection-container {
  max-width: 400px;
  margin: auto;
}

.autocomplete-container {
    position: relative;
}

.address-row {
  display: flex;
  flex-direction: row;
  
  margin-bottom: 10px;
}

.address-row  .main-part {
  flex: 1
}

.small-input {
  width: 90px;
}

.margin-right {
  margin-right: 10px
}

.message-container {
  margin-top: 10px;
}

.button-container {
  margin-top: 20px;
  text-align: right
}

.warning-input {
   border-color: #ffb610;
}

.message-container {
  color: grey;
}

JavaScript

// The API Key provided is restricted to JSFiddle website
// Get your own API Key on https://myprojects.geoapify.com
const myAPIKey = "6dc7fb95a3b246cfa0f3bcef5ce9ed9a";

// set a country code here
const country = 'de';
const lang = "de";

let postcodeData;
let cityData;
let streetData;
let housenumber;

const postcodeInput = new autocomplete.GeocoderAutocomplete(
  document.getElementById("postcode"),
  myAPIKey, {
    lang: lang,
    type: "postcode",
    skipDetails: true,
    placeholder: "XXXXX",
    skipIcons: true,
    filter: {
      countrycode: [country]
    }
  });


const cityInput = new autocomplete.GeocoderAutocomplete(
  document.getElementById("city"),
  myAPIKey, {
    lang: lang,
    type: "city",
    skipDetails: true,
    skipIcons: true,
    placeholder: " ",
    filter: {
      countrycode: [country]
    }
  });

const streetInput = new autocomplete.GeocoderAutocomplete(
  document.getElementById("street"),
  myAPIKey, {
    lang: lang,
    type: "street",
    skipDetails: true,
    skipIcons: true,
    placeholder: " ",
    filter: {
      countrycode: [country]
    }
  });

postcodeInput.setPostprocessHook((feature) => {
  // show only postcode in the dropdown
  return feature.properties.postcode;
});


postcodeInput.on('select', (postcode) => {
  postcodeData = postcode;

  // When you select a specific postcode, the input can be filled out automatically for many countries.
  if (postcode && !cityData && postcode.properties.city) {
    cityInput.setValue(postcode.properties.city);
  }

  updateFilters();
});


cityInput.on('select', (city) => {
  cityData = city;

  if (city) {
    cityInput.setValue(city.properties.city || '');
  }

  if (city && city.properties.postcode) {
    postcodeInput.setValue(city.properties.postcode);
  }
 
  updateFilters();
});

streetInput.on('select', (street) => {
  if (street) {
    streetInput.setValue(street.properties.street);
  }
  
  if (street && !postcodeData && street.properties.postcode) {
 ...