Hide Show City and State when zip is populated

Question

javascript: I want to show city and state when the zip is filled in. I have the the geo location working but now I just want city and state to show when the zip is filled in.

This is my HTML:

<label for="city">City</label>
<input size="20" placeholder="Town or City" name="city" id="city" type="text">
          <br>
<label for="state">State</label>
<input size="10" placeholder="State/Province" name="state" id="state" type="text">

And this is my JavaScript:

zip.addEventListener("change", getGeo);

function getGeo(e){

// make an send an XmlHttpRequest
var x = new XMLHttpRequest();
x.open("GET","http://maps.googleapis.com/maps/api/geocode/json?address="+this.value,true);
x.send();

// set up a listener for the response
x.onreadystatechange=function(){
  if (this.readyState==4 && this.status==200){

    var c = JSON.parse(this.response).results[0].address_components[1].long_name;
    //alert(c);
    var s = JSON.parse(this.response).results[0].address_components[2].short_name;
      //alert(s);
      if (c) {
          city.value = c;
      }
      if (s) {
          state.value = s;
      }

      //document.getElementById("output").innerHTML = o;
      var l = JSON.parse(this.response).results[0].geometry.location;
      if (l.lat) {
          lat.value = l.lat;
      }
      if (l.lng) {
          lon.value = l.lng;
      }

  }
}
}

It's all in this jsfiddle http://jsfiddle.net/lakenney/gad7ntgk/

It is unclear what you are asking. Do you want to reveal city+state fields when they are returned from the geocode request? — Mike Causer, May 10 '15 at 23:22
why are you json parsing the response multiple times? Store the parsed results once...a lot more efficient — charlietfl, May 10 '15 at 23:25

score 0 · Answer 1 · answered May 10 '15 at 23:26

See updated jsfiddle. http://jsfiddle.net/gad7ntgk/3/

Problem that you had is that this HTML was commented out:

 <!--<label for="city">City</label>
          <input size="20" placeholder="Town or City" name="city" id="city" type="text">
          <br>
          <label for="state">State</label>
          <input size="10" placeholder="State/Province" name="state" id="state" type="text">-->

And when values returned the assigning of value should be:

document.getElementById('city').value = c;

score 0 · Accepted Answer · answered May 11 '15 at 01:13

Looks like you already have a good start, but this example might help a bit. Run the code snippet and enter a postal code or city name. I kept it very simple, but you could check the data array length. When equal to 1 you have a match and could display geo location and other into on the page.

Keep in mind that you're doing a cross domain ajax call ... which will fail in IE < 10. Lots of questions about that on SO if you need help.

<!DOCTYPE HTML>
<html>
<head>
<title>Demo</title>
<style type="text/css">
    #container {position: relative; }
    #location {width: 20em; border: 1px steelblue solid;}
    #results { border: 1px gray solid; padding: 2px; position: absolute;background-color:aliceblue;}
    #results ul { list-style: none; padding: 0; }
    #results ul li {padding: 2px; color: dimgray; }
</style>
</head>
<body>


<div id="container">
    Enter a city or postal code:<br>
    <input id="location" type="text" onKeyup="getLocation()" value="London">
    <div id="results"></div>
</div>

<script type="text/javascript">

function getLocation( ) {
    var value, xhr, html, data, i;
    value = document.getElementById('location').value;
    if (value.length < 2) return;
    xhr = new XMLHttpRequest();
    xhr.open("GET", "http://maps.googleapis.com/maps/api/geocode/json?address=" + value, true );
    xhr.onreadystatechange = function() {
        if (xhr.readyState==4 && xhr.status==200) {
            data = JSON.parse(xhr.responseText);
            html = '';
            for(i=0; i< data.results.length; i++ ) {
                html += '<li>' + data.results[i].formatted_address;
            }
            document.getElementById('results').innerHTML = '<ul>' + html + '</ul>';
        }
    }
    xhr.send();
}
    
getLocation();
document.getElementById('location').focus();

</script>
</body>
</html>

Hide Show City and State when zip is populated

2 Answers2