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

I haven't yet tested in all browsers, but you can do your own ordering within a click event: http://jsfiddle.net/vol7ron/9KCNL/1/

$(document).ready(function() {
    $("input:reset").click(function() {       // apply to reset button's click event
        this.form.reset();                    // reset the form
        window.alert($("input:text").val());  // call your function after the reset      
        return false;                         // prevent reset button from resetting again
    });
});

Answer 2

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

Answer 3

Time ago I worked debugging a Google IE related plugin and I solved the main error with a bubbling trick. That's why I think immediately in this solution for your problem (of course should be cross-browser):

<form>
    <div id="capture_bubble">
        <input type="text"><input type="reset">
    </div>
</form>

In this way you can capture the bubbling with $('#capture_bubble') after reset event be triggered.

You can make a quick test with:

(function($) {
    $(function() {
        $('#capture_bubble').live('click', function(){
            console.debug('capture_bubble');
            alert('capture_bubble')
        })
        $("input[type='reset']").live('click', function(){
            this.form.reset(); // forcing reset event
            console.debug('reset');
            alert('reset')
        });                 
    });
})(jQuery);

Please note: this.form.reset(); (change made due to a jeff-wilbert observation)

Answer 4

you shouldn't need to wait 50 milliseconds. If you use setTimeout with a timeout of zero, it effectively means "push this code onto the event stack". Since the form-reset is guaranteed to have fired first, the code in the setTimeout is guaranteed (in well behaved javascript interpreters) to have access to the form values you want (post-reset). You should be able to use the code below, guilt-free.

var afterReset = function(){
    var pushMeOntoTheEventStack = window.setTimeout(function(){
        $("#form input").each(function(){
            console.log( this.name + ' = ' + this.value );
        });
    },0);
};
$("#form").on("reset",afterReset);

Answer 5

Try this solution

Goal:

• add on "click" event
• prevent the default action (reset)
• trigger "reset"
• run desired code

Example:

$("button[type='reset']").on('click', function(evt) {
   evt.preventDefault();
   $(evt.target).trigger('reset');

   // enter code to run after reset
   $.each($(this).find(":input"), function(){  
      $.uniform.update($(this));  
   }); 

});