Display ajax loader icon when submitting form

Question

My need is very simple. When the user tries to log in and submit the login form, I should have displayed the ajax bootloader icon (for example, created on www.ajaxload.info) in the foreground with a transparent and inconspicuous background (for example, in this site ). when the server finishes, it may display the next page or re-display the old one with errors.

How can i do this?

Thank you in advance.

Answer 1

jQuery ( javascript , ) , :

$(function(){  
 $('#yourFormId').on('submit', function(e){
        //stop the form refreshing the page
        e.preventDefault();

        //serialize the form for submission to the server
        var data = $(this).serialize();
        //get the url for the form
        var url = $(this).attr('action');

        //make an ajax request to submit the form, showing the loader and unclickable div
        $('#yourAjaxLoader,#unclickableDiv').fadeIn();
        $.post(url+'?'+data, function(){
            //the request has completed, so fade out the loader and div
            $('#yourAjaxLoader,#unclickableDiv').fadeOut();
        });  
    }); 
});

unclickable div, css :

/*css*/    
#unclickableDiv
{
    z-index:99999;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    background-color: black;
    display:none;
}

div body. , "" , . ajax div, .

jQuery http://jquery.com, , . ,

:

jQuery on() .submit .click .. 1.7, , . : http://api.jquery.com/on/

Answer 2

JQuery Throbber (http://plugins.jquery.com/plugin-tags/throbber):

, , , , . ( ) $.loading() $('# foo'). Loading(). "" . "" ( ), ( ).