Take the 2-minute tour ×

I have been trying to design a javascript for over a week (I'm new to JS) which geocodes a location when a search button is hit and the submits the form if successful. To make it to slightly more complicated, if an option from the autosuggest is selected, it also geocodes it even before the search button is hit.

This all seems to work, except that the form is never submitted and for the life of me I can't figure out why. If anyone can spot where I have gone wrong I would hugely appreciate it, I've spent such a long time on this and now I'm truely stuck.

Link: http://jsfiddle.net/sR4GR/42/

$(function () {
  var input = $("#loc"),
      lat   = $("#lat"),
      lng   = $("#lng"),
      lastQuery  = null,
      lastResult = null, // new!

  function processLocation(query, callback) { // accept a callback argument
    var query = $.trim(input.val()),

    // if query is empty or the same as last time...
    if( !query || query == lastQuery ) {
      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 ) {
        lastResult = true; // success!
      } else {
        alert("Sorry - We couldn't find this location. Please try an alternative");
        lastResult = false; // failure!
      callback(lastResult); // send the result back

  autocomplete = new google.maps.places.Autocomplete(input[0], {
    types: ["geocode"],
    componentRestrictions: {
      country: "uk"

  google.maps.event.addListener(autocomplete, 'place_changed', processLocation);

  $('#searchform').on('submit', function (event) {
    var form = this;

    event.preventDefault(); // stop the submission

    processLocation(function (success) {
      if( success ) { // if the geocoding succeeded, submit the form

share|improve this question
have you do console.log() anywhere to see exactly where your code breaks? –  Dyllen James Owens May 17 '13 at 14:53
add comment

1 Answer

up vote 2 down vote accepted

You're calling:

processLocation(function (success) {

But your processLocation has the callback on the second parameter:

function processLocation(query, callback)

Try removing the query parameter from processLocation:

function processLocation(callback)

OR call it with a blank argument:

processLocation(null, function (success) 
share|improve this answer
I'm sorry but I don't understand, is it incorrect for me to have the callback in the second param? –  Jimmy May 17 '13 at 14:56
yes, it's incorrect to have the callback in the second parameter if you're only passing in 1 parameter. You have specified 2 parameters in processLocation(), but you're only passing one. So your function that you're passing that you intend to be the callback, is being passed in as the query parameter. –  penx May 17 '13 at 14:57
@Jimmy do you plan on passing in query anywhere? it seems you want to pass it in but have a local variable with the same name? function processLocation(query, callback) { // accept a callback argument var query = $.trim(input.val()), –  ᾠῗᵲᄐᶌ May 17 '13 at 14:57
It's only line 9 you need to edit, like this jsfiddle.net/sR4GR/49 –  penx May 17 '13 at 15:10
you declared processLocation(query, callback).. so you called processLocation(function(){// your code}) .. so your function is getting passed in as query the first param processLocation(query<-- –  ᾠῗᵲᄐᶌ May 17 '13 at 15:11
show 3 more comments

Your Answer


