Ajax preloader image

[AdvaMax]

Hi guys,

I am still new at Javascript, and have some difficulty getting a preloader image to display in my existing code.

Basically the user submits an identity number which is sent to another php file for verification, and the result is displayed without refreshing the page.

For this I came accross this Ajax code:

function submitForm() {
$.ajax({type:'POST', url: 'verify.php', data:$('#ValidationForm').serialize(), success: function(response) {
$('#ValidationForm').find('.form_result').html(response);
}});

return false;
}

Here is the form code:
<form id="ValidationForm" onsubmit="return submitForm();">
<input type="text" name="number">
<input type="Submit" value="Verify">
</form>

How can I amend the above code to have a preloader image (or text) shown while the user waits for the result?

I have read about the readystate event, but my attempts to use it in the JavaScript above failed.

Help will be greatly appreciated.

Thanks

[DanInMa]

this assumes your loading image or container element has a class of loaderimg
- also this only happens upon a successful ajax request, you should also consider using the error: setting as well - if you havent already ofc ourse

function submitForm() {
$('.loaderimg').fadeIn();
$.ajax({type:'POST', url: 'verify.php', data:$('#ValidationForm').serialize(), success: function(response) {
$('#ValidationForm').find('.form_result').html(response);
$('.loaderimg').fadeOut();
}});

return false;
}

[AdvaMax]

Thanks DanInMa,

Solution was relative simple, but since I didn't know better, you directed me in the right direction.

I added a div with the loader image in the container element, and made it not visible:

<div id='loading' style='display: none;'><img src='loader.gif'></div>

Then I did the following in the javascript (make the loading div visible once the form is submitted):

function submitForm() {
var loadingdiv = document.getElementById('loading');
loadingdiv.style.display = "block";
$.ajax({type:'POST', url: 'verify.php', data:$('#ValidationForm').serialize(), success: function(response) {
$('#ValidationForm').find('.form_result').html(response);
}});

return false;
}

Now since the container element gets replaced with all new info, it's not necessary for me to make the loading div invisible again.

And it works perfect!