CODEWITHSUNDEEP
javascriptgoogle-mapsjquerygoogle-sheets
Kirkman14
Kirkman14

Reputation: 1676

How to delay submit() event until after Geocoder is finished?

I'm working on a Google Maps / Google Spreadsheet mashup.

At this point I'm working on a javascript/jquery bit that allows users to fill out a form, then submits that form to a Google Spreadsheet.

When the user clicks "submit", the script will quickly send off the user's street address to Google's Geocoder, which returns the equivalent lat and lng.

The problem I'm running into is that the form information gets submitted to Google Spreadsheets before my Geocoder routine is complete. I can't figure out how to modify the .submit() event to keep it from submitting until after I have the lat and lng.

In my jQuery ready handler I have this:

    $("#ss-form").submit(function(event) {
        var street    = $('#entry_1').val();
        var citystate = $('#entry_2').val();
        var country   = $('#entry_3').val();
        findAddress(street,citystate,country);              
    });

It is calling this function:

function findAddress(street, citystate, country) {
    var myAddress = [
        street,
        citystate.toLowerCase(),
        country.toLowerCase()
    ].join(', ');

    geocoder.geocode(
        {address: myAddress}, 
        function(result,status) {
            var myLat = result[0].geometry.location.lat();
            var myLng = result[0].geometry.location.lng();
            $('#entry_5').val(myLat);
            $('#entry_6').val(myLng);
            console.log(myLat+','+myLng);
        }
    );
}

The relevant HTML is a simple form with six inputs (#entry_0 through #entry_6).

So what I want to do is get the Lat and Lng, then put them into the HTML form as values, and THEN let the form submit. How do I get the submission to delay until after the findAddress function is finished?

Upvotes: 0

Views: 1484

Answers (2)

ShankarSangoli
ShankarSangoli

Reputation: 69915

You can try this

$("#ss-form").submit(function(event) {
     if(!$(this).data("geocodeset")){
        findAddress();              
        return false;
     }
});

function findAddress() {
    var $form = $("#ss-form");
    var street    = $('#entry_1').val();
    var citystate = $('#entry_2').val();
    var country   = $('#entry_3').val();

    var myAddress = [
        street,
        citystate.toLowerCase(),
        country.toLowerCase()
    ].join(', ');

    geocoder.geocode(
        {address: myAddress}, 
        function(result,status) {
            var myLat = result[0].geometry.location.lat();
            var myLng = result[0].geometry.location.lng();
            $('#entry_5').val(myLat);
            $('#entry_6').val(myLng);
            console.log(myLat+','+myLng);

            $form.data("geocodeset", true).submit(); 
        }
    );

}

Upvotes: 1

Rafay
Rafay

Reputation: 31033

$("#ss-form").submit(function(event) {
        event.preventDefault(); //prevent the submit
        var street    = $('#entry_1').val();
        var citystate = $('#entry_2').val();
        var country   = $('#entry_3').val();
        findAddress(street,citystate,country,$(this));        

    });

submit the form in the function

function findAddress(street, citystate, country, form ) {
    var myAddress = [
        street,
        citystate.toLowerCase(),
        country.toLowerCase()
    ].join(', ');

    geocoder.geocode(
        {address: myAddress}, 
        function(result,status) {
            var myLat = result[0].geometry.location.lat();
            var myLng = result[0].geometry.location.lng();
            $('#entry_5').val(myLat);
            $('#entry_6').val(myLng);
            console.log(myLat+','+myLng);

            form[0].submit(); //submit the form here  
        }
    );

}

Upvotes: 1

Related Questions