title: Uncaught TypeError: Cannot call method 'val' of undefined
body: <p>I'm having a hard time with this. This is the code im working with: </p>
  
  <p><a href="http://jsfiddle.net/arunpjohny/Jfdbz/" rel="nofollow">http://jsfiddle.net/arunpjohny/Jfdbz/</a></p>
  
  <pre><code>$(function () {
      var lastQuery  = null,
          lastResult = null, // new!
          autocomplete,
          processLocation = function (input, lat, long, callback) { // accept a callback argument
              var query = $.trim(input.val()),
                  geocoder;
  
              // if query is empty or the same as last time...
              if (!query || query === lastQuery) {
                  if (callback) {
                      callback(lastResult); // send the same result as before
                  }
                  return; // and stop here
              }
  
              lastQuery = query; // store for next time
  
              geocoder = new google.maps.Geocoder();
              geocoder.geocode({address: query}, function (results, status) {
                  if (status === google.maps.GeocoderStatus.OK) {
                      lat.val(results[0].geometry.location.lat());
                      long.val(results[0].geometry.location.lng());
                      lastResult = true; // success!
                  } else {
                      alert("Sorry - We couldn't find this location. Please try an alternative");
                      lastResult = false; // failure!
                  }
                  if (callback) {
                      callback(lastResult); // send the result back
                  }
              });
          },
          ctryiso = $("#ctry").val(),
          options = {
              types: ["geocode"]
          };
  
      if (ctryiso !== '') {
          options.componentRestrictions= { 'country': ctryiso };        
      }
      autocomplete = new google.maps.places.Autocomplete($("#loc")[0], options);
  
      google.maps.event.addListener(autocomplete, 'place_changed', processLocation);
  
      $('#search').click(function (e) {
          var form = $(this).closest('form'),
              input = $("#loc"),
              lat = $("#lat"),
              lng = $("#lng");
          e.preventDefault(); // stop the submission
  
          processLocation(input, lat, lng, function (success) {
              if (success) { // if the geocoding succeeded, submit the form
                  form.submit();
              }
          });
      });
  
      $('#geosearch').click(function (e) {
          var form = $(this).closest('form'),
              input = $("#geoloc"),
              lat = $("#geolat"),
              lng = $("#geolng");
          e.preventDefault(); // stop the submission
  
          processLocation(input, lat, lng);
      });
  });
  </code></pre>
  
  <p>When the autosuggestion link is clicked it should geocode the result in the first and second example. However when I click on a autosuggest option from the dropdown I get the following error on line 39:</p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot call method 'val' of undefined</p>
  </blockquote>
  
  <p>Can anyone help pinpoint where I am going wrong here please?</p>
  
  <p>EDIT: To replicate I do the following:</p>
  
  <ul>
  <li>Open up javascript console in Chrome</li>
  <li>Type in a few letters into the location box on the top line</li>
  <li>Click on a suggested location from the drop down</li>
  </ul>
  
  <p>Apparently according to my editor line 39 says this:</p>
  
  <p>if (ctryiso !== '') {</p>