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:
Quote:
|
<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):
Quote:
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!