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.


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

Javascript- Onload Event Handler

Javascript- Onunload Event Handler

Javascript- Onfocus Event Handler

Javascript- Onblur Event Handler

Javascript- Onclick Event Handler

Javascript- Onchange Event Handler

Javascript- Onkeydown Event Handler

Javascript- Onkeyup Event Handler

Javascript- Onmouseover Event Handler

Javascript- Onmousedown Event Handler

Javascript- Onmouseup Event Handler

Javascript- Onmouseout Event Handler

Javascript- Onabort Event Handler

Javascript- Oncopy Event Handler

HTML Comment Box is loading comments...