jquery - Ajax during call and on error -

i have ajax call gets location of user , pulls city , province database. when click button trigger call want input box disappear , replaced loading gif.

if unable return anything, box should come back.

i have tried using this:

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

but prevents script doing anything.

var x = document.getelementbyid("demo");  function getlocation() {     if (navigator.geolocation) {         navigator.geolocation.getcurrentposition(showposition);     }      else {          x.innerhtml = "geolocation not supported browser.";     } }  function showposition(position) {     var formdata = {         'latitude'              :  ''+ position.coords.latitude +'' ,         'longitude'             : ''+ position.coords.longitude +'',     };      // process form     $.ajax({         type        : 'post', // define type of http verb want use (post our form)         url         : 'php/includes/get_postal_rem.php', // url want post         data        : formdata, // our data object         datatype    : 'html', // type of data expect server     })     // using done promise callback     .done(function(data) {             $('#location').val(data);     });       // stop form submitting normal way , refreshing page     e.preventdefault();  } 

add function disable input box before // process form comment i.e.

$('#location').attr('disabled', 'disabled');  // process form comment.  

by way, you'll need add code show progress gif , enable textbox , hide gif after ajax returns (or if errors out)