confirm reset example

2008-03-01 @ 17:58#

earlier this month, i wrote a post and the various ways to execute an HTML submit action on a form (there were four, actually). about a week ago, i posted on some common UI mistakes listed at useit.com, noting that the reset action is often implemented in an 'unsafe' way - so true.

so here is my example for how to handle the reset button in a safe way - allowing the user to confirm the action first (check out the live example, too)

<html>
  <head>
    <title>reset-test</title>
  </head>
  <body>
    <h1>reset-test</h1>
    <form method="post" action="#">
      <input type="text" name="data" />
      <input type="submit" id="submit"/>
      <input type="reset" id="reset"/>
    </form>
  </body>
  <script type="text/javascript">
    window.onload = function()
    {
      document.getElementById("reset").onclick= function()
      {
        return confirm('erase all data?');
      };
      document.getElementsByTagName("form")[0].onsubmit = function()
      {
        return confirm('ready to post to the server?');
      };
    }
  </script>
</html>

code