javascript - Call a function after form reset

Question

Is there a method for me to call a function after click on the reset button in form, and I mean after, so that the form is first reset and then my function called. Normal event bubbling would call my function and only then reset the form. Now I would like to avoid setTimeout in order to do this.

What I need is to call a function when a form is reset because I use uniform and uniform needs to be updated when values change.

At the moment I do it like this:

//Reset inputs in a form when reset button is hit  
$("button[type='reset']").live('click', function(){  
    elem = this;  
    //Sadly we need to use setTimeout to execute this after the reset has taken place  
    setTimeout(function(){  
        $.each($(elem).parents('form').find(":input"), function(){  
            $.uniform.update($(this));  
        });  
    }, 50);  
});  

I tried to do al this on $(':input').change() but reseting an element does not seem to trigger the change event.
Thank you in advance for any help.

Answer 1

HTML forms do have an onReset event, you can add your call inside there:

function updateForm()
{
    $.each($('form').find(":input"), function(){  
        $.uniform.update($(this));  
    });  
}

<form onReset="updateForm();">

As pointed out in the comment by Frédéric Hamidi you can also use bind like so:

$('form').bind('reset', function() {
    $.each($(this).find(":input"), function(){  
        $.uniform.update($(this));  
    }); 
});

After some testing it appears both ways fire before the reset takes place and not after. The way your doing it now appears to be the best way.

The same conclusion was found in this question here