Address Auto-Complete Form

Address Form with Auto-Complete by Google

by jeremy_tactical

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="container">
<div class="panel panel-primary">
  <div class="panel-heading">
    <h3 class="panel-title">Address</h3>
  </div>
  <div class="panel-body">
   <input id="autocomplete" placeholder="Enter your address"
      onFocus="geolocate()" type="text" class="form-control" onselect="validateAddress()">
      <br>
   <div id="address">
     <p id="demo">Test notification</p>
      <div class="row">
         <div class="col-md-6">
            <label class="control-label">Street address</label>
            <input class="form-control" id="street_number" disabled="true">
         </div>
         <div class="col-md-6">
            <label class="control-label">Route</label>
            <input class="form-control" id="route" disabled="true">
         </div>
      </div>
      <div class="row">
         <div class="col-md-6">
            <label class="control-label">City</label>
            <input class="form-control field" id="locality" disabled="true">
         </div>
         <div class="col-md-6"> 
            <label class="control-label">State</label>
            <input class="form-control" id="administrative_area_level_1" disabled="true">
         </div>
      </div>
      <div class="row">
         <div class="col-md-6">
            <label class="control-label">Zip code</label>
            <input class="form-control" id="postal_code" disabled="true">
         </div>
         <div class="col-md-6">
            <label class="control-label">Country</label>
            <input class="form-control" id="country" disabled="true">
         </div>
      </div>
   </div>
   <button type="button">Click Me!</button>
</div>
  </div>
</div>  
<script...

CSS

.container {
  margin-top: 20px;
}

JavaScript

var placeSearch, autocomplete, fulladdress;
      var componentForm = {
        street_number: 'short_name',
        route: 'long_name',
        locality: 'long_name',
        administrative_area_level_1: 'short_name',
        country: 'long_name',
        postal_code: 'short_name'
      };

      function initAutocomplete() {
        // Create the autocomplete object, restricting the search to geographical
        // location types.
        autocomplete = new google.maps.places.Autocomplete(
            /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),
            {types: ['geocode']});

        // When the user selects an address from the dropdown, populate the address
        // fields in the form.
        autocomplete.addListener('place_changed', fillInAddress, function() {
        alert("Test");
        console.log(document.getElementById('autocomplete').value);
        });
        
        //alert(autocomplete);
        
      }

      function fillInAddress() {
        // Get the place details from the autocomplete object.
        var place = autocomplete.getPlace();

        for (var component in componentForm) {
          document.getElementById(component).value = '';
          document.getElementById(component).disabled = false;
        }

        // Get each component of the address from the place details
        // and fill the corresponding field on the form.
        for (var i = 0; i < place.address_components.length; i++) {
          var addressType = place.address_components[i].types[0];
          if (componentForm[addressType]) {
            var val = place.address_components[i][componentForm[addressType]];
            document.getElementById(addressType).value = val;
          }
        }
      }
      
      function validateAddress() {
      
      // alert(fulladdress);
      	/*let text = fulladdress;
        let pattern = /^[0-9]{1,4}(([\-\/][0-9]{1,4})|(\/[ABCDFGHJKLMNPRSTV]{1,2}))*$/;
        let result =...