Changing YUI (or AlloyUI) method behaviour

Question

I was trying to change _onFormReset method in YUI (or Alloy UI) - I think it is common JavaScript (OOP) thing, but I am a noob in JS OOP and YUI (been using some JQuery till now) - how can I change functionality of method (keeping other methods as they are)?

for example;

Currently method looks like:

_onFormReset: function(event) {
    var instance = this;
    instance.resetAllFields();
},

(src: http://alloyui.com/api/files/alloy-ui_src_aui-form-validator_js_aui-form-validator.js.html#l1192)

But I want it to be like:

_onFormReset: function(event) {
    var instance = this;
    instance.resetAllFields();
    /* PSEUDO:
**a.) action is logged (ajax call to DB)
b.) all fields in form are reset (default behaviour) + form get's a new anti CSFR UID via ajax
c.) notification is shown (like that message in my example but let's say: Form reseted!)
d.) (Submit button reappears)**
...

*/
},

I tried something like:

/* trying to hijack thingZ */

var FormReset = Y.Component.create({
// component name
NAME : 'form-validator-reset',

EXTENDS : Y.Base,

// Base component's method which extends
prototype : {
    _onFormReset: function(event) {
            var instance = this;
            instance.resetAllFields();
            Y.one("#submitit").setHTML("<h4>Thanks, form submitted ok</h4>");
        }
    }
});

But with no success.

I looked at documentation and wasn't able to find a way, also it seems like I am missing OOP Javascript basics :(

Can somebody help me "catch the fish" :)

Trying to learn good (OOP) JavaScript for a long time, reading a lot online, but best way for me is learning by coding and now I am really stuck...

So my wish is to have something that I can use in all my forms for when reset button is clicked (in same way I would also change Submit) - OOP method - attached to default reset function, upgrading it in "my" way.

Answer 1

It looks like you're trying to tackle this the wrong way. Unless you're just doing this as an exercise in overriding a method you really shouldn't do that if all you're trying to do is print out a thank you.

Also if you're looking to thank the user for submitting you should be trying to do that when the user submits the form, not when the form is reset. To do this you'd subscribe a function to the 'submit' event of the form.

A.one("#my_form").on("submit", function() {
    Y.one("#submitit").setHTML("<h4>Thanks, form submitted ok</h4>");
});

Answer 2

Ok, after rethinking it, I suppose preventDefault is ok for me (I will try to learn OOP JS with other cases :)).

This is (a n00by) solution:

1. add #resetit to reset button

2. add code:

   var ressetterr = Y.one("#resetit");

   Y.one(ressetterr).on("click", function(e){
       console.log("resetit");
       e.preventDefault();
   
    });