Perform Javascript action after reset button handles click

Question

How do I perform an action immediately after an <input type="reset"/> has already reset the form elements?

HTMLFormElement.onreset will work nicely. Link: http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-htmlevents — , Jul 18 '11 at 20:53
It's generally bad practice to include a reset button at all. Users often click them accidentally and lose all their work. In practice, it's very rare that anyone really wants to reset the form. — jimbo, Jul 18 '11 at 20:53
@Mrchief: That fires before, not after. @Matt: Yup, thanks! @jimbojm: Yeah but the person who wants this page says he wants a reset button, so that's not much of a choice on my part. :P Thanks though. — user541686, Jul 18 '11 at 21:24
@jimbojw? Yours is a very bold statement. You might be interested in [this discussion](https://ux.stackexchange.com/a/1070/116190) on the UX StackExchange community about reset buttons. — mapto, Nov 16 '18 at 08:49

score 15 · Answer 1 · answered Jul 18 '11 at 20:50

15

Try :

<input type="reset" onclick="return resetForm();"/>

function resetForm(){
    setTimeout(function(){
        // do whatever
    }, 50);
    return true;
}

answered Jul 18 '11 at 20:50

ChristopheCVB

7,269
1
29
54

3

+1 for delaying the function to fire *after* the form was reset. – gilly3 Jul 18 '11 at 20:57
For every browser I tested, setting the timeout to 0 was sufficient. – Gary Dec 11 '16 at 15:46
Looks like this is the only way to run something really after the reset – Patricio Rossi Apr 25 '17 at 13:02
actually, you don't need the 50 ms, just the timeout is deferring this process to the end of the js processing pile. – Felipe Quirós Nov 16 '17 at 21:34

score 6 · Accepted Answer · answered Jul 18 '11 at 20:53

6

Forms have a reset event that you can listen for.

<script>
function resetHandler() {
    // code
}
</script>
<form ... onreset="resetHandler();">
</form>

Of course, it's bad practice to add javascript handlers this way, so you'd want to use .addEventListener/.attachEvent or jQuery.bind(), but you get the idea.

answered Jul 18 '11 at 20:53

digitalbath

7,008
2
17
15

4

resetHandler runs before the form is reset, not after! – Eugene Kuzmenko Jan 19 '15 at 23:27
The questions is about the execution of a function AFTER the reset is done, not before, not at the same time. this answer is not correct. – Patricio Rossi Apr 25 '17 at 13:00

score 2 · Answer 3 · answered Aug 29 '12 at 13:06

2

Write code/events which you wanted to call in middle of this function. I have tested this. Working good.

$(document).ready(function() {
    $("input:reset").click(function() {       // apply to reset button's click event
        this.form.reset();                    // reset the form

        // call your functions to be executed after the reset      

         return false;                         // prevent reset button from resetting again
    });
});

answered Aug 29 '12 at 13:06

Somnath Muluk

55,015
38
216
226

The [reset function](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset) fails when a form control has the name or id 'reset' – Michael Plotke Oct 20 '15 at 14:16

score -1 · Answer 4 · answered Jul 18 '11 at 20:53

-1

You always can use jQuery, or do some tricks with form reset event itself.

answered Jul 18 '11 at 20:53

caarlos0

20,020
27
85
160

Perform Javascript action after reset button handles click

4 Answers4

Linked