Question

I have a scenario where I am using Google Map JavaScript API to process the address after user submits the form. However, I want to post result, that Google API returns back, to server side for further processing within the same form submission. How can I achieve this? Thanks in advance for your advice.

Answer 1

Using jQuery, you could handle it like this:

$(document).ready(function() {
    $("form").submit(function(e) {
        // blocks form from being submitted, which you'll handle later
        e.preventDefault();

        // call google apis 

        // build data to submit 
        var data = {
            formData: $("something").val();
            // could use formData: $(this).serialize(); instead, 
            // more server-side parsing required though

            // add additional data from the google service to data object
        };

        // submit the form with serialized data
        $.post("/serverurl", data);
    });
});

If you’re using Webforms, set the serverurl to a .ashx handler, parse the submitted data (will be set to Request.Form[] values). If you’re using MVC, change the server url to a controller action and parse accordingly.