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';

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


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

    return false;
  • 1
    Thanks Tim for your answer. I used this code to get it work $('submitbt').observe('click', function(){ if (dataForm.validator.validate()) { // your code } }.bind(dataForm)); – Vaibhav Shahu May 13 '14 at 8:41
  • @Vaibhav Shahu - That worked brilliantly, most impressed! Thanks. – Henry's Cat Aug 20 '15 at 11:04

This is what worked for me, might be useful to others:

In Block/Adminhtml/blockname/Edit/Tab/Form.php I have added following Script in setAfterElementHtml() function :

<script type="text/javascript">
   var dataForm = new varienForm("edit_form", true);
   jQuery("body").on("click", ".generateReport", function(){
   if (dataForm.validator.validate()) { 
       jQuery(this).prop("disabled", true);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.