Article Categories

Selected Reading

What is the usage of onreset event in JavaScript?

HTML Javascript Programming Scripts

The onreset event is triggered when a form is reset using a reset button or the reset() method. This event allows you to execute JavaScript code when users clear form data.

Syntax

<form onreset="functionName()">
  // form elements
</form>

// Or using addEventListener
form.addEventListener('reset', functionName);

Example: Basic onreset Event

<!DOCTYPE html>
<html>
<head>
    <title>onreset Event Example</title>
</head>
<body>
    <script>
        function resetFunct() {
            alert("The form was reset");
        }
    </script>
    
    <form onreset="resetFunct()">
        <label>Enter age: <input type="number" value="25"></label><br><br>
        <label>Enter birth month: <input type="text" value="January"></label><br><br>
        <input type="reset" value="Reset Form">
    </form>
</body>
</html>

Example: Using addEventListener

<!DOCTYPE html>
<html>
<head>
    <title>onreset with addEventListener</title>
</head>
<body>
    <form id="myForm">
        <label>Name: <input type="text" value="John Doe"></label><br><br>
        <label>Email: <input type="email" value="john@example.com"></label><br><br>
        <input type="reset" value="Clear Form">
        <input type="submit" value="Submit">
    </form>
    
    <script>
        document.getElementById('myForm').addEventListener('reset', function() {
            alert('Form has been reset!');
            console.log('All form fields cleared');
        });
    </script>
</body>
</html>

Example: Preventing Form Reset

<!DOCTYPE html>
<html>
<head>
    <title>Prevent Form Reset</title>
</head>
<body>
    <form id="protectedForm">
        <label>Important data: <input type="text" value="Don't lose this!"></label><br><br>
        <input type="reset" value="Reset (Will be prevented)">
    </form>
    
    <script>
        document.getElementById('protectedForm').addEventListener('reset', function(event) {
            if (!confirm('Are you sure you want to reset the form?')) {
                event.preventDefault(); // Prevent the reset
                alert('Form reset cancelled');
            } else {
                alert('Form reset confirmed');
            }
        });
    </script>
</body>
</html>

Key Points

The onreset event fires before the form is actually reset
You can prevent the reset by calling event.preventDefault()
Works with both inline event handlers and addEventListener()
Commonly used for confirmation dialogs or cleanup tasks

Common Use Cases

Showing confirmation dialogs before clearing form data
Logging form reset events for analytics
Resetting custom form states or validation messages
Triggering cleanup functions when forms are cleared

Conclusion

The onreset event provides control over form reset behavior. Use it to confirm user intentions, perform cleanup tasks, or prevent accidental data loss when forms are reset.

Anjana

Updated on: 2026-03-15T23:18:59+05:30

443 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next