Remove ajax loader image after page load

Question

I have a form with required fields and when the submit button is clicked a loader image appears. This has the code:

jQuery(document).ready(function($){
    {
        $.getElementById('form').onsubmit = function () {
            $.getElementById('submit').style.display = 'block';
            $.getElementById('loading2').style.display = 'block';
        };
    }(document));
)};

HTML:

<input type="submit" class="button alt"  onclick="$(\'#loading\').show();" id="place_order"/>.

The issue I am having is when the the required fields are not field and the submit button is clicked, the loader images appears and when the required field errors are displayed, the loader image still shows.

How do I prevent it from displaying?

Answer 1

I don't like your use of jquery this way,

what I do myself is to validate the form and post the result myself with jquery that means better control over everything so my code will be like this:

 $('#formBtn').click(function(){ $("#loading").fadeIn(); //use some validation here and let code go to other line if validation passed $.post("/signup",$('#form').serialize(),function(){ //other action like redirecting to homepage or showing a message }).fail(function(){ //to show a message that submit was failed }).always(function(){ $("#loading").fadeOut(); }); }) 

Answer 2

使用jQuery post或get提交表单，然后在回调中验证您的响应，然后在验证完成后使用.hide（）。

Answer 3

You try to use jQuery BlockUI Plugin Probably easier.

jQuery BlockUI Plugi

When you want to Block you can use

$.blockUI();

When you want to UnBlock you can use

$.unblockUI();