It doesn’t happen often, but occasionally we all accidentally hit the reset button on a web form and lose all of what we just spent time typing out. I’ve written a little bit of javascript that makes it possible to recover from these disasters.

I’m a big believer that if the user manages to screw something up whilst using some software it’s the fault of the software developers rather than the user. In his recent article “Never Use a Warning When you Mean Undo” Aza Raskin highlighted the need for an undo buffer rather than a warning prior to making a mistake, the reasoning being that users become accustomed to ignoring warnings – especially if it’s regarding a task they perform often, and that recoverability is a key area of software usability. Web applications have long suffered from a general lack of undo functionality and it’s something I’m keen to take a look at addressing in future projects, but that’s for another day.

HTML forms often have a reset button, this is a native html control that allows a user to reset the contents of a web form to its starting state. I’m not too concerned with the use case for such reset buttons – I can’t imagine getting so much wrong in entering a form that it’s easiest just reset everything, but let’s assume you have a valid reason to include a reset button and so there it is in your form. First issue is that these buttons are usually right next to the submit buttons and have the same appearance (Luke Wroblewski looks at the effect of these types of buttons in “Primary & Secondary Actions in Web Forms”), second problem is that if you accidentally hit this button the majority of web browsers (if not all) won’t let you undo this action (you can select a text field and undo changes to that, but as far as I can tell you’re pretty much stuck with other kinds of inputs).

With this problem in mind I had a go at writing a simple bit of javascript (enabled by jQuery) that looks at all the forms in a page with the class of “undo-reset” and captures events on any reset buttons it finds. It’s fairly straightforward so I won’t go into too much detail but basically it adds a short bit of text at the end of the form alerting the user that the form has been reset and provides the option to reverse the change. It makes use of the jQuery forms and deserialize plugins to store and restore the contents of the form.

You can try it out on the example page

Please let me know of any issues you find or any improvements you can suggest. I imagine it could easily be made into a greasemonkey script that you can apply to any forms you like.