Question

I have a problem with jquery and serialize method.

I have a form, that I send via $.ajax method. In this method I use serialize();. Before I call serialize I use a function that modifies the 2 input text values, but on serialize the 2 inputs send the old values.

This is my code.

$('#formANAGRAFICA3').submit(function() { 
    codeAddress();
    var $form = $('#formANAGRAFICA3'); 
    $.ajax({
        type: 'post',
        data : $form.serialize(),
        url: $form.attr( 'action' ),
        success: function(data, textStatus, jqXHR) {
            $('#editANAGRAFICA3').show();
        }
    });
    return false;
});

function codeAddress() { 
    var address = 'my value';
    geocoder.geocode( {'address': address}, function(results, status) { 
        if (status == google.maps.GeocoderStatus.OK) { 
            var pos = results[0].geometry.location;
            map.setCenter(pos);
            marker.setPosition(pos);
            document.getElementById("aTitle33").value = pos.lat(); 
            document.getElementById("aTitle34").value = pos.lng();
        } else {
            alert("Geocode was not successful for the following reason: " + status);
        }
    });
} 

When it send the form, the data received is not updated, even though I modified the input text values with the codeAddress function. Why?

Answer 1

codeAddress() does not modify your input fields instantly. Instead, it issues an AJAX (asynchronous) request, and updates your inputs when the response comes in. In the meantime, the rest of your code proceeds as normal.

As a timeline:

1. Call codeAddress()
2. Issue AJAX request to Google maps
3. Return from codeAddress()
4. Serialize and submit form
5. Response from Google comes back.
6. Inputs are modified, too late to be used in the form submit.

The solution is to wait for geocoder.geocode() to complete before submitting the form.

geocoder.geocode( { 'address': address}, function(results, status) {
    // Modify inputs
    // Submit form
}