Javascript- Onreset Event Handler

The Onreset event handler in Javascript is an event handler that is triggered when a user resets a form by clicking on the reset button of a form.

By adding this event handler to a form, we can relay to a user exactly what will occur when he or she clicks the form's reset button.

In order for this event handler to be triggered, the form must have a reset button. If it only has a submit button, it cannot function. It gets triggered only with a reset button.

As an example, let's take the form below.

Enter some information into the form and then click the reset button.

You will see that it creates a pop-up alert box which tells the user that all the information s/he entered will be cleared and that the form is now reset.

HTML Code

To create this form above which creates this pop-up alert when the reset button is pressed, the HTML code to do is:

<form onreset="window.alert('All the information you entered will be cleared and the form will now be reset');">
Name: <input type="text" value=""/><br><br>
Email: <input type="text" value=""/><br><br>
Phone: <input type="text" value=""><br><br>
<input type="Reset" value="Reset"/> </form>

The onreset event handler is attached to the <form> tag, not the actual reset button, but the tag of the form itself. For the onreset event handler to work, the form button must be of type Reset. Since the event handler handles resets of forms, the button of the form must be of type reset. This reset button click is what triggers the onreset event handler.

The onreset event handler is probably not one of the more commonly or heavily used event handlers. However, in certain situations, they do have application and use.

Related Resources

HTML Comment Box is loading comments...

Learning about Electronics

Javascript- Onreset Event Handler

HTML Code