Setting values on form submission using jQuery

Question

I'm using the following code to geocode a supplied address using the Google Maps API. The idea is to geocode the address and pass the lat/long in the form post so that my controller action can utilize it. Unfortunately, this doesn't seem to work as the lat/long aren't submitted with the rest of the form. What am I doing wrong?

$(document).ready(function() {
    $("#search_form").submit(function(event) {
        var address = $("#searchAddress").val();

        if (address != "") {
            var geocoder = new GClientGeocoder();

            geocoder.getLatLng(
                address,
                function(point) {
                    if (point) {
                        // Found address, populate hidden form fields
                        $("#searchLatitude").val(point.lat());
                        $("#searchLongitude").val(point.lng());  
                    }
                }
            );
        }
    });
});

Chad Grant · Accepted Answer · 2009-04-24 09:40:19Z

3

geocoder.getLatLong() is asynchronous so your Submit is not waiting on your function(point) to be called.

Add a button (not a submit of course) and attach a click handler like so:

$("#buttonId").click(function() {

    var address = $("#searchAddress").val();

        if (address != "") {
            var geocoder = new GClientGeocoder();

            geocoder.getLatLng(
                address,
                function(point) {
                    if (point) {
                        // Found address, populate hidden form fields
                        $("#searchLatitude").val(point.lat());
                        $("#searchLongitude").val(point.lng());  

                        $("#search_form").submit();

                    }
                }
            );
        }

});

answered Apr 24, 2009 at 9:40

Chad Grant

45.6k10 gold badges67 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ólafur Waage · Accepted Answer · 2009-04-24 09:21:42Z

1

You are submitting the form and then setting the values. This does not work. You need to set the values and then submit the form.

answered Apr 24, 2009 at 9:21

Ólafur Waage

70.2k22 gold badges147 silver badges199 bronze badges

2 Comments

Kevin Pang Over a year ago

That's what I was afraid of. Is there a standard workaround to this?

Ólafur Waage Over a year ago

There are some good suggestions in the other answers. You could look into them.

kgiannakakis · Accepted Answer · 2009-04-24 09:26:27Z

0

jQuery form plug-in will make your life easier. There is a beforeSubmit event that you could use.

answered Apr 24, 2009 at 9:26

kgiannakakis

104k28 gold badges163 silver badges197 bronze badges

Collectives™ on Stack Overflow

Setting values on form submission using jQuery

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related