title: Insert google maps autofill address API into mysql database
body: <p>I have been trying for hours now to get this working and would really appreciate help as  i think it's a small typo that i'm blind to. I am creating a search bar for addresses that when someone searches it adds their address to a database, however everytime I search a blank row is added to the database making me think the variables are empty however I cant figure out for the life of me how to fill them.</p>
  
  <p><a href="https://pastebin.com/4CmY1CHt" rel="nofollow noreferrer">https://pastebin.com/4CmY1CHt</a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Place Autocomplete Address Form&lt;/title&gt;
      &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no"&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;style&gt;
        /* Always set the map height explicitly to define the size of the div
         * element that contains the map. */
        #map {
          height: 100%;
        }
        /* Optional: Makes the sample page fill the window. */
        html, body {
          height: 100%;
          margin: 0;
          padding: 0;
        }
      &lt;/style&gt;
      &lt;style&gt;
        #locationField, #controls {
          position: relative;
          width: 480px;
        }
        #autocomplete {
          position: absolute;
          top: 0px;
          left: 0px;
          width: 99%;
        }
        .label {
          text-align: right;
          font-weight: bold;
          width: 100px;
          color: #303030;
        }
        #address {
          border: 1px solid #000090;
          background-color: #f0f0ff;
          width: 480px;
          padding-right: 2px;
        }
        #address td {
          font-size: 10pt;
        }
        .field {
          width: 99%;
        }
        .slimField {
          width: 80px;
        }
        .wideField {
          width: 200px;
        }
        #locationField {
          height: 20px;
          margin-bottom: 2px;
        }
      &lt;/style&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
        &lt;?php 
  
          $host = 'localhost';
          $user = 'root';
          $pass = '';
          $database = 'addressTest';
          $con = mysqli_connect($host, $user, $pass, $database);
          if ($con){
              echo 'successfully connected';
          }
  
        $number = $street = $town = $county = $country = '';
  
        if ($_SERVER["REQUEST_METHOD"] == "POST") {
  
          $number = $_POST["street_number"];  
          $street = $_POST["route"];
          $town = $_POST["locality"];
          $county = $_POST["administrative_area_level_1"];
          $country = $_POST["country"];
  
          $sql = "INSERT INTO address (Number, Street, City, State, Country) VALUES ('$number', '$street', '$town', '$county', '$country')";
              $insert = mysqli_query($con, $sql);
              if ($insert){
                  echo "inserted successfully";     
          }
        }
  
        ?&gt;
  
      &lt;div id="locationField"&gt;
          &lt;form name=addressField  action="&lt;?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?&gt;" method="post"&gt;
              &lt;input id="autocomplete" placeholder="Enter your address"
                     onFocus="geolocate()" type="text" name="address"&gt;&lt;/input&gt;
  
      &lt;/div&gt;
  
              &lt;table id="address"&gt;
              &lt;tr&gt;
                &lt;td class="label"&gt;Street address&lt;/td&gt;
  
                &lt;td class="slimField"&gt;&lt;input class="field" id="street_number" name=street_number
                      disabled="true"&gt;&lt;/input&gt;&lt;/td&gt;
  
                &lt;td class="wideField" colspan="2"&gt;&lt;input class="field" id="route"
                      disabled="true"&gt;&lt;/input&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td class="label"&gt;City&lt;/td&gt;
  
                &lt;!-- Note: Selection of address components in this example is typical.
                     You may need to adjust it for the locations relevant to your app. See
                     https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform
                --&gt;
                &lt;td class="wideField" colspan="3"&gt;&lt;input class="field" id="locality"
                      disabled="true"&gt;&lt;/input&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td class="label"&gt;State&lt;/td&gt;
                &lt;td class="slimField"&gt;&lt;input class="field"
                      id="administrative_area_level_1" disabled="true"&gt;&lt;/input&gt;&lt;/td&gt;
                &lt;td class="label"&gt;Zip code&lt;/td&gt;
                &lt;td class="wideField"&gt;&lt;input class="field" id="postal_code"
                      disabled="true"&gt;&lt;/input&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td class="label"&gt;Country&lt;/td&gt;
                &lt;td class="wideField" colspan="3"&gt;&lt;input class="field"
                      id="country" disabled="true"&gt;&lt;/input&gt;&lt;/td&gt;
              &lt;/tr&gt;
            &lt;/table&gt;
          &lt;input type="submit" value="Submit" onclick="validateForm()"&gt;
        &lt;/form&gt;
  
      &lt;script&gt;
        // This example displays an address form, using the autocomplete feature
        // of the Google Places API to help users fill in the information.
  
        // This example requires the Places library. Include the libraries=places
        // parameter when you first load the API. For example:
        // &lt;script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&amp;libraries=places"&gt;
  
        var placeSearch, autocomplete;
        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']});
  
          autocomplete.setComponentRestrictions(
              {'country': ['irl']});
  
          // When the user selects an address from the dropdown, populate the address
          // fields in the form.
          autocomplete.addListener('place_changed', fillInAddress);
        }
  
        function fillInAddress() {
          // Get the place details from the autocomplete object.
          var place = autocomplete.getPlace();
  
          for (var component in componentForm) {
            document.getElementById(component).value = '';
          }
  
          // Get each component of the address from the place details
          // and fill the corresponding field on the form.
          for (var i = 0; i &lt; 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;
            }
          }
        }
  
        // Bias the autocomplete object to the user's geographical location,
        // as supplied by the browser's 'navigator.geolocation' object.
        function geolocate() {
          if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
              var geolocation = {
                lat: position.coords.latitude,
                lng: position.coords.longitude
              };
              var circle = new google.maps.Circle({
                center: geolocation,
                radius: position.coords.accuracy
              });
              autocomplete.setBounds(circle.getBounds());
            });
          }
        }
      &lt;/script&gt;
      &lt;script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAygtLX9ROxE1TF6RJ9KG6yWJ_zTv5IZG4&amp;libraries=places&amp;callback=initAutocomplete"
          async defer&gt;&lt;/script&gt;
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>Any help would be much appreciated and sorry if it's obvious.  </p>