Magento – Show loading image after clicking submit button magento prototype

form-validationmagento-enterpriseprototype-js

I want to show loading image after clicking the submit button using prototype. I want loading image appear after successful validation. I used this code

var dataForm = new VarienForm('form-validate', true);
dataForm.submit = function(button, url) { 
    if (this.validator.validate()) { 
        //image code                 
        document.getElementById('processing').style.display = 'block';
    }
}.bind(dataForm);

Code flow doesn't go inside dataForm.submit = function(button, url) { .. }.
Can anyone told me how to do it using prototype?

Best Answer

There are many ways to do this. One of them is to override submit method of VarienForm class:

VarienForm.prototype.submit = VarienForm.prototype.submit.wrap(function($super, url) {
    // your action here
    // ..

    // then call parent method
    $super(url);

    return false;
}

Related Solutions

Magento – Check customer email is already exist in magento using ajax prototype

I would try returning the json response like this:

$status = "PASS"; 
$jsonStatus = 200;

$info =  array( "status" => $status);

$this->getResponse()->setBody(json_encode($info))->setHttpResponseCode($jsonStatus)->setHeader('Content-type', 'application/json', true);

return $this;

If you set the $status to 504 you will return an error.

Magento – load ajax loader image after clicking save button

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;
     });
});

Best Answer

Related Solutions

Magento – Check customer email is already exist in magento using ajax prototype

Magento – load ajax loader image after clicking save button

Related Topic