4

I have a custom form in my magento store, and use varienform validation. Everything works fine. But requirement is, I need a clear button so that I can click that button to reset the form inputs including the validation error messages.

the below image is my current form:

enter image description here

after clicking Clear buton it should become like this:

enter image description here

How can I do this? Can anyone help?

1 Answer 1

7

The Form-Validator is defined here:

/app/design/frontend/base/default/template/sendfriend/send.phtml:135
var productSendtofriendForm = new VarienForm('product_sendtofriend_form');

and the VarienForm has a validator and this validator has a reset method:

/js/prototype/validation.js:155
reset : function() {
    Form.getElements(this.form).each(Validation.reset);
},

Try this:

Add a clear button, give it suggestform_clear as id

<button type="button" title="Clear" class="button" id="suggestform_clear"><span>Clear</span></button>

and add this script below

var productSuggestForm = new VarienForm('form-suggestproduct');
$('suggestform_clear').observe('click', function(){
    productSuggestForm.validator.reset();
}.bind(productSuggestForm));
3
  • I added a clear button gave it suggestform_clear as id and added this script $('suggestform_clear').observe('click', function(){ productSuggestForm.validator.reset(); }); it doesn't work :(
    – Shathish
    Commented Aug 14, 2013 at 7:32
  • are you sure, that this function is called? And that the name of the suggestForm VarienForm is correct? Commented Aug 14, 2013 at 7:37
  • 1
    sorry my bad! I failed to bind the form to the event. I added a clear button gave it suggestform_clear as id and added this script $('suggestform_clear').observe('click', function(){ productSuggestForm.validator.reset(); }.bind(productSuggestForm)); it works like charm! Thank you so much :)
    – Shathish
    Commented Aug 14, 2013 at 7:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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