Geocoder search fails when jquery submit() is used instead of submit_tag in rails

Question

I'm building a locator app for some practice in Ruby on Rails and I want to switch my location search form from using the geocoder gem to a clientside javascript call.

The clientside javascript call works and pushes the latitude and longitude into hidden fields with geocodeAddress()

But when I remove the original submit_tag button and replace with geocodeAddressAndSubmit(), the hidden field values aren't used and the search no longer returns results.

Is it possible it's submitting the form a second time and resetting the search terms?

Any pointers? Thanks!

Javascript methods

var client_geocoder;
function initialize() {
  client_geocoder = new google.maps.Geocoder();
}

function geocodeAddress() {
  var address = document.getElementById('address').value;
  client_geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      $('#search_location_lat').val(results[0].geometry.location.lat());
      $('#search_location_lng').val(results[0].geometry.location.lng());
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}

function geocodeAddressAndSubmit() {
  geocodeAddress();
  $('#search_form').submit();
}

Search form in Rails View

<div id="panel" >
<input id="address" type="textbox" placeholder="Place, Address or Zipcode">
  <%= form_tag locations_path, id: 'search_form', method: :get do %>
    <%= hidden_field_tag "search_location[lat]" %> 
    <%= hidden_field_tag "search_location[lng]" %> 
    <%= label :distance, "Distance: " %>
    <%= select_tag :distance, options_for_select([["1 mi", 1], ["2 mi", 2], ["5 mi", 5], ["10 mi", 10]]) %>
  <% end %>
  <input type="button" value="Search" onclick="geocodeAddressAndSubmit()">
  <%= link_to "Clear Search", root_path %>
</div>

Index method in Rails Controller

def index
    coordinates = params[:search_location].values if params[:search_location].present?
    @locations = Location.search_and_show(
        coordinates,
        params[:distance],
        (current_user.admin if current_user)
    )
end

**Rails console when I submit the current form **

Started GET "/locations?

    utf8=%E2%9C%93&search_location%5Blat%5D=&search_location%5Blng%5D=&distance=1" for 10.0.2.2 at 2014-11-22 00:15:37 +0000
    Processing by LocationsController#index as HTML
      Parameters: {"utf8"=>"✓", "search_location"=>{"lat"=>"", "lng"=>""}, "distance"=>"1"}
      Location Load (0.9ms)  SELECT locations.*, 3958.755864232 * 2 * ASIN(SQRT(POWER(SIN((0.0 - locations.latitude) * PI() / 180 / 2), 2) + COS(0.0 * PI() / 180) * COS(locations.latitude * PI() / 180) * POWER(SIN((0.0 - locations.longitude) * PI() / 180 / 2), 2))) AS distance, MOD(CAST((ATAN2( ((locations.longitude - 0.0) / 57.2957795), ((locations.latitude - 0.0) / 57.2957795)) * 57.2957795) + 360 AS decimal), 360) AS bearing FROM "locations"  WHERE (locations.latitude BETWEEN -0.014473178311084797 AND 0.014473178311084797 AND locations.longitude BETWEEN -0.014473178311084797 AND 0.014473178311084797 AND (3958.755864232 * 2 * ASIN(SQRT(POWER(SIN((0.0 - locations.latitude) * PI() / 180 / 2), 2) + COS(0.0 * PI() / 180) * COS(locations.latitude * PI() / 180) * POWER(SIN((0.0 - locations.longitude) * PI() / 180 / 2), 2)))) BETWEEN 0.0 AND '1') AND "locations"."public" = 't'  ORDER BY distance ASC
    Redirected to http://0.0.0.0:3000/
    Completed 302 Found in 4ms (ActiveRecord: 0.9ms)


    Started GET "/" for 10.0.2.2 at 2014-11-22 00:15:38 +0000
    Processing by LocationsController#index as HTML
      Location Load (0.4ms)  SELECT "locations".* FROM "locations"  WHERE "locations"."public" = 't'
      Rendered locations/index.html.erb within layouts/application (1.8ms)
    Completed 200 OK in 394ms (Views: 391.3ms | ActiveRecord: 0.4ms)

Answer 1

Fixed by moving the form submit into the geocoderAddress() function.

Someone else more clever noted that this is a asynchronous request and the form should not be submitted until after the Google Maps API has replied and the hidden fields have been populated.

Current JS

var client_geocoder;
function initialize() {
  client_geocoder = new google.maps.Geocoder();
}

function geocodeAddressThenSubmit() {
  var address = document.getElementById('address').value;
  client_geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      $('#search_location_lat').val(results[0].geometry.location.lat());
      $('#search_location_lng').val(results[0].geometry.location.lng());
      $('#search_form').submit();
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}