Form submits with previous fields values

The following code is supposed to send an address to Google Maps, get开发者_开发百科 as a reply the latitude and longitude, store them in the proper fields in the form and submit the form.

What actually happens is the alerts appear in the correct order - first the two default values and then the ones received from google, but then two strange things happen: the timeout doesn't happen and the form submits with the default values instead of the ones from google.

Can you please say why?

$('#simplr-reg').submit(function(event)
{           
    $("input[name=latitude]").val(9999);    // set default values
    $("input[name=longitude]").val(9999);               
    alert($("input[name=latitude]").val());
    alert($("input[name=longitude]").val());

    codeAddress(function(success){}); //callback from googlemaps    

    setTimeout(function(){
        callback(false); //pass false indicating no/invalid response 
        }, 20000);
});

function codeAddress(callback)
{               
    var geocoder = new google.maps.Geocoder();

    geocoder.geocode( { 'address': address}, function(results, status)
    {
        if (status == google.maps.GeocoderStatus.OK) 
        {   
            var latitude = results[0].geometry.location.lat();
            var longitude = results[0].geometry.location.lng();
            $("input[name=latitude]").val(latitude); 
            $("input[name=longitude]").val(longitude);

            alert($("input[name=latitude]").val());
            alert($("input[name=longitude]").val());            
        }                   
    });         
}  // end of code address

You are using the callback incorrectly, causing your need to use setTimeout. Also, $.submit() function happens before the actual submission of the form. That's probably why the value of the inputs reset every time.

Please refer to .submit and .post and check which one suits your need.

Alternatively, you can opt not to submit the form altogether, and arrive at something like this (not tested):

Have a button so that you can trigger the event:

<input type="button" name="submitBtn">

When the user clicks this, it will set the values of the inputs:

$('#submitBtn').click(function () {
   var address = "new york"; // or an input value
   var geocoder = new google.maps.Geocoder();
   geocoder.geocode( { 'address': address}, function(results, status)
   {
        if (status == google.maps.GeocoderStatus.OK) 
        {   
            var latitude = results[0].geometry.location.lat();
            var longitude = results[0].geometry.location.lng();
            $("input[name=latitude]").val(latitude); 
            $("input[name=longitude]").val(longitude);      
        }                   
    });         
});

No need to set a timeout as the callback function itself will get called once the response has returned. Unless of course, you need the timeout for some other purpose--e.g. callback(false) is doing something else.

Disclaimer: I'm not familiar with the Geocoder API.

EDIT:

If you don't want to edit the HTML, you can instead introduce a variable.

var isCallBack = false;

$('#simplr-reg').submit(function(event)
{           
    if (!isCallBack) {
        $("input[name=latitude]").val(9999);    // set default values
        $("input[name=longitude]").val(9999);               
        event.preventDefault();
        codeAddress();
    } else
        isCallBack = false; // may not be required if the page refreshes
});

function codeAddress()
{               
    var geocoder = new google.maps.Geocoder();

    geocoder.geocode( { 'address': address}, function(results, status)
    {
        if (status == google.maps.GeocoderStatus.OK) 
        {   
            var latitude = results[0].geometry.location.lat();
            var longitude = results[0].geometry.location.lng();
            $("input[name=latitude]").val(latitude); 
            $("input[name=longitude]").val(longitude);

            isCallBack = true;
            $('#simplr-reg').trigger('submit');
        }                   
    });         
}  // end of code address