How to: After js validation showing processing img

Im trying to get a processing image showing after a successful submit with is validated by gen_validatorv4.js.

The problem is the formdata is going to a php file thats post data to google speadsheet. And that takes like 3-10 seconds so p开发者_JAVA技巧eople click again on the submit button. Thats why I want a processing image. Any ideas how to do this?

$(document).ready(function(){ $('#ajax_loading').show();}

????

Or any help is welcome!

bind a click event to the submit button and show the ajax_loading image in the click event. the only way to hide it is when you receive the response event. when you get the response back you can hide the ajax_loading image.

I'm a fan of jQuery for these issues, you can try jQuery NimbleLoader for the loading image, I would also suggest trying how to enable/disable an element using jQuery to enable or disable to form to prevent double submission.

Go to this site: http://www.ajaxload.info/ and generate yourself a image.

Lets say the image is called loader.gif

Then if your form is like that <form id="myform"> your jquery will look like that:

$('#myform').submit(function(){
       $('#myform').prepend("<div id=\"loader\"></div>");
       ... do stuff here ...
        $('#loader').remove();
})

and you will have this CSS:

#loader {
    position: absolute;
    z-index: 100;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background: url("loader.gif") no-repeat center center;
}