I want to load ajax loader image after clicking save button

Question

I am using magento 1.9 version. After clicking save or any button then I want to show progress by ajax loader. I found a div having ID "loading-mask". If i will change its style display:none to block then it all working fine. But I want to change this after validation pass. Where should I can place this condition for proper result ?

document.getElementById("loading-mask").style.display="Block";

Answer 1

You can show the imagen when the form is submitted:

$j(function() {
     $j('form').submit( function() {
         alert("Something"); //do something else here
         //in your case
         $j("#loading-mask").show();
         return true;
     });
});

Answer 2

Please check below fiddle link for better Understanding:

jsfiddle demo

$( "#myform" ).validate({
  rules: {
    fullname: {
      required: true
    },
    mobile:{
        required:true,
        minlength: 10,
        number:true
    },
    email:{
        required:true,
        email:true
    }
  },
  messages: {
        fullname: {
            required: "Please enter your name"
        },
        mobile:{
            required: "Please enter your mobile number",
            minlength:"Minumum length 10 digits"
        },
        email:{
            required: "Please enter your email-id",
            email: "Invalid email-id"
        }
    },
  submitHandler: function() { $(".gif-loader").show(); $('#myform').submit(); }
});