reset | onreset event

Fires when the user resets a form.

Syntax

HTML Attribute	<element onreset = "handler(event)">
Event Property	object.onreset = handler;
attachEvent Method	object.attachEvent("onreset", handler)
addEventListener Method	object.addEventListener("reset", handler, useCapture)

Event information

Synchronous	No
Bubbles	No
Cancelable	Yes

Event handler parameters

pEvtObj [in]: Type: IHTMLEventObj

Standards information

HTML 4.01 Specification, Section 18.2.3

Remarks

Executes associated code.

To invoke this event, do one of the following:

Click an input type=reset button.
Invoke the reset method of the form object.

The pEvtObj parameter is required for the following interfaces:

Examples

This example demonstrates how to use the onreset event for a form object. Reset the form by clicking the first or second button. The only difference between the two buttons is that the second button invokes the reset method of the form object and the first button is of input type=reset. When either button is pressed the form is reset, resulting in the onreset event call on the form object. The onreset event calls an event handler which in turn adds the text Resetting form. to the text area below.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/onreset.htm

JavaScript


<!DOCTYPE html>
<html>
<head>
  <title>onreset Event Sample</title>
</head>
<body style="overflow: hidden">
  <h1>onreset Event Sample</h1>
  <p>This example demonstrates how to use the <strong>onreset</strong> event for a <strong>FORM</strong> object. 
    Reset the form by clicking the first button <em>(Input type=reset)</em> or second button <em>(form.reset())</em>. 
    The only difference between the two buttons is that the second button invokes the <strong>reset</strong> method of the 
    <strong>FORM</strong> object and the first button is of <em>input type=reset</em>. When either button is pressed the 
    <strong>FORM</strong> resets, resulting in the <strong>onreset</strong> event call on the <strong>FORM</strong> object. 
    The <strong>onreset</strong> event calls an event handler which in turn adds the text "<em>Resetting form.</em>" to the text area below.</p>
  <form name="form1" onreset="doReset();" style="border: 2px solid #CCC; background: #EEE; padding: 10px;">
    <strong>Form</strong><br>
    Enter some text:
    <input type="text" name="oText1" value=""><br>
    <br>
    <input type="reset" value="Input type=reset" />
    <button onclick="form.reset(); return false;">form.reset()</button>
  </form>
  <strong>Form status</strong>
  <p><span id="oTextArea1"></span></p>
  <p>&nbsp;</p>
  <button onclick="location.reload(true);">Refresh Page</button>
  <script>
    function doReset() {
      document.getElementById('oTextArea1').textContent += "Resetting form.  ";
    }
  </script>
</body>
</html>