Question

I have a form that requires a physical address. Once the user enters the full address, I have a button that says “Verify address”. I want to be able to click that button, trigger an ajax call that will call a file in the server which will get the longitude and latitude of that address, then return to the form with those coordinates, and display a div with them. Dont worry about figuring out the coordinates. Im just trying to figure out the whole ajax call and jquery display upon response from the server. Thanks

So, I did this to have things working:

$(document).ready(function() {

//if verify button is clicked
$('#verify').click(function () {

    var address = $('input[name=address]');
    var city    = $('input[name=city]');
    var state   = $('input[name=state]');
    var zip     = $('input[name=zip]');
    var country = $('select[name=country]');

    //organize the data for the call
    var data = 'address=' + address.val() + '&city=' + city.val() + '&state=' + state.val() + '&zip='  + zip.val() + '&country='  + country.val();

    //start the ajax
    $.ajax({
        url: "process.php",
        type: "GET",
        data: data,
        cache: false,
        success: function (html) {

            //alert (html);

            if (html!='error') {

                //show the pin long and lat form
                $('.form2').fadeIn('slow');

            } else alert('Error: Your location cannot be found');
        }
    });

    //cancel the submit button default behaviours
    return false;
});
});

process.php returns the longitude and latitude back in a variable as: “longitude,latitude”. How do I access that data back in the front end so I can populate the form fields with it? Thanks a lot for the great responses.

Answer 1

I hope this is helpful. This would be a generic AJAX call to a php page:

$.ajax({
            type: "POST",
            url: "scripts/process.php",
            data: "type=query&parameter=" + parameter,
            success: function (data) {  //Called when the information returns
                if(data == "success"){
                  //Success
                } else {
                  //Fail
                }
            },
            error: function () {
                  //Complete failure
            }
        });