JSFiddle - React, Tailwind, and code Playground

by ChrisStanyon

HTML

<form method="post" id="suretyForm">
  <div class="row no-gutters custom-search-input-2">
    <div class="col-lg-9">
      <div class="form-group">
        <input class="form-control" id="locationkeyword" type="search" placeholder="City, State or Zip">
        <i class="icon_pin_alt"></i>
      </div>
    </div>
    <div class="col-lg-3">
      <input type="submit" id="submitToLocation" value="Find a Surety Agent">
    </div>
  </div>
  <!-- /row -->
</form>

JavaScript

window.addEventListener("DOMContentLoaded", () => { // on page load
  const apiUrl = 'https://www.mapquestapi.com/geocoding/v1/address?key=WOKB46QrlGikgp25oTcLmFByeUHr6slI&location=';
  document.getElementById("suretyForm").addEventListener("submit", (e) => { 
    e.preventDefault(); // do not submit the form
    let locationkeywordField = document.getElementById('locationkeyword')
    let selectedGeo = locationkeywordField.value;
    if (!selectedGeo) {
      alert(`Please type a ${locationkeywordField.placeholder}`)
      return;
    }
console.log(`${apiUrl}${selectedGeo}`)
    fetch(`${apiUrl}${selectedGeo}`, {
        method: 'GET',
        headers: {
          'Accept': 'application/json',
        },
      })
      .then(response => response.json())
      .then(data => { console.log(data)
        const { lat, lng } = data.results[0].locations[0].displayLatLng;
        localStorage.setItem('lat', lat);
        localStorage.setItem('lng', lng);
        //later save this action to the DB
        alert(`Found Your selected Geo, and we will redirect you ${lat} ${lng}`);
        location.href = "listing-Agency.html";
      })

  })
})