Ajax during call and on error

I have an ajax call that gets the location of a user and pulls the city and province from my database. When you click the button to trigger the call I want the input box to disappear and be replaced with a loading gif.

If it is unable to return anything, the box should come back.

I have tried using this:

    .ajaxStart(function(data) {
        $('#location').attr('disabled', 'disabled');
    })

But it prevents the script from doing anything.

var x = document.getElementById("demo");

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } 
    else { 
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}

function showPosition(position) {
    var formData = {
        'latitude'              :  ''+ position.coords.latitude +'' ,
        'longitude'             : ''+ position.coords.longitude +'',
    };

    // process the form
    $.ajax({
        type        : 'POST', // define the type of HTTP verb we want to use (POST for our form)
        url         : 'php/includes/get_postal_rem.php', // the url where we want to POST
        data        : formData, // our data object
        dataType    : 'html', // what type of data do we expect back from the server
    })
    // using the done promise callback
    .done(function(data) {
            $('#location').val(data);
    });


    // stop the form from submitting the normal way and refreshing the page
    e.preventDefault();

}