Can't set value for hidden field in form

Question

I´m trying to set a value for a hidden field in a form in Rails 3.

But when i submit my form to my Database theres nothing written for these fields.

There is my JS:

function getGeocode() {
geocoder = new google.maps.Geocoder();
var street = $("#player_street").val()
var postalcode = $("#player_postalcode").val()
var city = $("#player_city").val()
var address = street + ", " + postalcode + ", " + city
var lat
var lng
//console.log(address)

geocoder.geocode( { 'address': address}, function(results, status) {
  if (status == google.maps.GeocoderStatus.OK) {
    lat = results[0].geometry.location.hb
    lng = results[0].geometry.location.ib
    $("#player_lat").val(lat)
    $("#player_lng").val(lng)
    return true
  } else {
    return false
    alert("Dein Player konnte nicht eingetragen werden, bitte probiere es noch einmal.");
  }
})
}

The values for the hidden fields get set when i turn the returnvalue of getGeocode() to false. But when i set the returnvalue to true theres no entry to the database.

The fields are set and working in the model and the function is accessed by the onsubmit method of the form_for helper.

Does anybody know how to solve this?

Answer 1

Since your using jQuery use :hidden jQuery selector.

var street = $("#player_street:hidden").val()

http://api.jquery.com/hidden-selector/

Answer 2

geocoder.geocode( ...

is asynchronous function. So it receives response and set values for the fields after a while, while rest code of the getGeocode() function keep running.

If you return true in the function, the form is submitted before the geocoder returns result. If you return false , the submission is cancelled and the values are set.

So you need to submit the data in callback, something like:

$(#the_form_id).submit( function() {

  geocoder = new google.maps.Geocoder();
  var street = $("#player_street").val()
  var postalcode = $("#player_postalcode").val()
  var city = $("#player_city").val()
  var address = street + ", " + postalcode + ", " + city
  var lat
  var lng


  geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      lat = results[0].geometry.location.hb
      lng = results[0].geometry.location.ib
      $("#player_lat").val(lat)
      $("#player_lng").val(lng)
      $(#the_form_id).unbind('submit').submit();
    } else {
      return false
      alert("Dein Player konnte nicht eingetragen werden, bitte probiere es noch einmal.");
    }
  });
  return false;
})

Answer 3

To prevent the method from submission i added ev.preventDefault() and resumed the method after setting the values with $("#new_player").unbind('submit').submit()

$("#new_player").submit( function(ev) {

    ev.preventDefault();

    geocoder = new google.maps.Geocoder();
    var street = $("#player_street").val()
    var postalcode = $("#player_postalcode").val()
    var city = $("#player_city").val()
    var address = street + ", " + postalcode + ", " + city
    var lat
    var lng

    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        lat = results[0].geometry.location.hb
        lng = results[0].geometry.location.ib
        $("#player_lat:hidden").val(lat)
        $("#player_lng:hidden").val(lng)

        $("#new_player").unbind('submit').submit()

      } else {
        alert("Dein Player konnte nicht eingetragen werden, bitte probiere es noch einmal.")
        return false
      }
    })
})