Weird form reset event behavior

Question

I ran into weird problem when listening to form reset event.

Inside callback of reset event I check for input value, and it's not updated immediately, I have to wait until next tick, for example with setTimeout(callback, 0) or preventing default and triggering event manually with el.reset()

Here is jsbin example so you can see what I'm talking about - after you insert some value into input and click reset button, no content should be added to div element.

I can see the same problem on Chrome as well as Firefox.

Is it a bug in implementation or intended behavior?
If the latter – why?
Is there any better way to workaround it than doing setTimeout or preventing default and triggering event manually?

Why not just remove the `div` element? Then it doesn't behave the way you're describing. The form resets on the first tick. **[Fiddle](http://jsfiddle.net/webfrogs/g8495/)** — Millhorn, Jul 09 '14 at 14:33
It resets, but when checking for input value inside callback, it's still there. — methyl, Jul 09 '14 at 14:34

score 2 · Answer 1 · edited May 23 '17 at 12:29

2

The reset event is called before anything is reset rather than after, to give you a chance to cancel the reset if you need to.

This SO question says the only way to do do something after the reset is to call a function on a timeout: Call a function after form reset

edited May 23 '17 at 12:29

Community

1
1

answered Jul 09 '14 at 14:26

DoctorMick

6,703
28
26

It makes sense, but I like my method with preventing event and triggering it manually more than setTimeout. :) – methyl Jul 09 '14 at 14:33

score 1 · Answer 2 · answered Jul 10 '14 at 09:14

It seems that hack to this problem might be overriding onreset property.

There is no guarantee it works in other browers.

form.onreset=function(){
  var b = input.value;
  logger.innerHTML += b + "<br/>"; 
};

please find here example I've prepared http://jsbin.com/muzahuye/20/edit?html,js,output

works fine on firefox, at least 28

https://browserling.com/queue?uri=http%3A%2F%2Fjsbin.com%2Fmuzahuye%2F20%2F%3Foutput&browser=firefox&version=nightly

Weird form reset event behavior

2 Answers2