表格之前的地理位置提交

Question

我有一个轨道表格

<%= form_for @tree, :html => {:class => "well"} do |f| %>
<p>
  <div class="field">
    <%= f.text_field :address, :class => 'tree-address' %>
  </div>
</p> 
<p>
  <div class="actions">
    <%= f.submit :class => "submit", id: "new-tree" %>
  </div>
</p>

这是我的JS文件，它有我的Ajax POST请求将数据发送到我的数据库，这样工作正常，从Google提取的地理编码功能也是如此。我想做的是对地址进行地理编码，然后发送Ajax调用

function createTree(){
  $address = $('.tree-address').val();

  $.ajax({
    url: "/trees",
    method: 'POST',
    dataType: 'json',
    data: { tree:{
      address:$address, 
    }}
  });
}

function codeAddress() {
  console.log($('address').val());
  geocoder = new google.maps.Geocoder();
  var address = document.getElementById('address').value;
  geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      console.log(results[0].geometry.location)
      var latitude = results[0].geometry.location.A;
      var longitude = results[0].geometry.location.F;
    } else {
      console.log('Geocode was not successful for the following reason: ' + status);
    }
  });
}

$(document).ready(function(){

   $('#new-tree').on('submit', function(e){
     e.preventDefault();
     createTree();
   });

  $('#add-tree').on('click', function(){
    console.log("add-tree clicked");
    $('#tree-form').toggle();
  });

});