reset

16 March, 2023

Contributors

Milsaware

@milsaware

About

The reset event is a built-in event in HTML that is triggered when a form is reset. This event can be used to perform certain actions when a user resets a form, such as clearing the values of certain fields or resetting the state of the form to its initial values. The reset event is part of the DOM Level 2 Events specification, and it is supported by all modern web browsers.

The reset event is useful for performing certain actions when a user resets a form. For example, you may want to clear the values of certain form fields or reset the state of the form to its initial values. You can use JavaScript to add an event listener for the reset event and then write a function that will be called when the event is triggered. This function can then perform whatever actions you want in response to the reset event.

Event listener

Here's an example of adding an event listener for the reset event:

HTML

<form id="myForm">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    <br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
    <br>
    <button type="reset">Reset</button>
</form>

JavaScript

const myForm = document.querySelector('#myForm');

myForm.addEventListener('reset', () => {
    console.log('Form has been reset!');
});

Here, we have a simple form with two input fields and a reset button. We use the querySelector() method to select the form element by its ID, and then we use the addEventListener() method to add an event listener for the reset event. When the reset event is triggered (i.e., when the user clicks the reset button), the event listener function will be called, which simply logs a message to the console.

Property

Here's an example of using the onreset property to add a function that will be called when the reset event is triggered:

const myForm = document.getElementById('myForm');

myForm.onreset = function() {
    console.log('Form has been reset!');
};

Here, we get a reference to the form element using document.getElementById(), and then add a function to the onreset property of the form element. This function will be called when the reset event is triggered (i.e., when the user clicks the reset button), and logs a message to the console.

Inline

Here's an example of using the onreset attribute inline in HTML to add a function that will be called when the reset event is triggered:

HTML

<form id="myForm" onreset="handleReset()">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    <br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
    <br>
    <button type="reset">Reset</button>
</form>

JavaScript

function handleReset() {
    console.log('Form has been reset!');
}

Here, we add the onreset property to the form element and set its value to the name of a function that we define in the <script> tag. When the reset event is triggered (i.e., when the user clicks the reset button), the handleReset() function will be called, which logs a message to the console.

Note that this approach is not as flexible as using addEventListener(), since you can only specify a single function to be called when the reset event is triggered. Additionally, it is generally considered better practice to separate your JavaScript code from your HTML markup, rather than using inline event handlers.

Programmatic trigger

You can also programmatically trigger the reset event using the reset() method on a form element. This method resets all form controls to their default values, which triggers the reset event:

const myForm = document.getElementById('myForm');
const resetBtn = document.getElementById('resetBtn');

myForm.onreset = function() {
    console.log('Form has been reset!');
};

resetBtn.onclick = function() {
    myForm.reset(); // reset form programmatically
};

Here, we add an event listener to the reset button using the onclick property, and call the reset() method on the form element when the button is clicked. This triggers the reset event, which logs a message to the console using the onreset property.

javascript