Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Execute a script when a reset button in a form is clicked in HTML?
The onreset attribute in HTML is an event handler that executes a JavaScript function when a form's reset button is clicked. This attribute is applied to the <form> element and triggers before the form fields are actually reset to their default values.
Syntax
Following is the syntax for using the onreset attribute −
<form onreset="functionName()"> <!-- form elements --> <input type="reset" value="Reset"> </form>
The onreset attribute calls the specified JavaScript function when the user clicks the reset button or programmatically resets the form.
Basic Example
Following example demonstrates how to execute a script when a reset button is clicked −
<!DOCTYPE html>
<html>
<head>
<title>Onreset Event Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Student Information Form</h2>
<form onreset="display()">
<label for="sname">Student Name:</label><br>
<input type="text" id="sname" name="sname" value="John Doe"><br><br>
<label for="ssubject">Student Subject:</label><br>
<input type="text" id="ssubject" name="ssubject" value="Mathematics"><br><br>
<input type="reset" value="Reset Form">
</form>
<script>
function display() {
alert("Form reset successful!");
}
</script>
</body>
</html>
When you click the "Reset Form" button, the JavaScript function executes and displays an alert message before clearing the form fields back to their default values.
Student Information Form Student Name: [John Doe ] Student Subject: [Mathematics ] [Reset Form] (Clicking Reset shows alert: "Form reset successful!" then clears fields to defaults)
Preventing Form Reset
You can prevent the form from being reset by returning false from the onreset function. This is useful when you want to confirm the reset action with the user.
Example
<!DOCTYPE html>
<html>
<head>
<title>Confirm Reset Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>User Registration Form</h2>
<form onreset="return confirmReset()">
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email"><br><br>
<label for="message">Message:</label><br>
<textarea id="message" name="message" rows="3" cols="30"></textarea><br><br>
<input type="reset" value="Clear Form">
<input type="submit" value="Submit">
</form>
<script>
function confirmReset() {
return confirm("Are you sure you want to reset all fields?");
}
</script>
</body>
</html>
This example shows a confirmation dialog before resetting. If the user clicks "Cancel", the form is not reset. If they click "OK", the reset proceeds.
User Registration Form
Username: [ ]
Email: [ ]
Message: [ ]
[ ]
[Clear Form] [Submit]
(Clicking Clear Form shows: "Are you sure you want to reset all fields?" dialog)
Advanced Form Reset Handling
You can perform multiple actions during the reset event, such as logging, validation cleanup, or updating the user interface.
Example
<!DOCTYPE html>
<html>
<head>
<title>Advanced Reset Handling</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Contact Form</h2>
<form onreset="handleReset()" id="contactForm">
<label for="name">Name:</label><br>
<input type="text" id="name" name="name"><br><br>
<label for="phone">Phone:</label><br>
<input type="tel" id="phone" name="phone"><br><br>
<input type="reset" value="Reset">
<input type="submit" value="Submit">
</form>
<p id="status"></p>
<script>
function handleReset() {
// Update status message
document.getElementById("status").innerHTML = "Form has been reset at " + new Date().toLocaleTimeString();
// You can add more cleanup logic here
console.log("Form reset event triggered");
return true; // Allow reset to proceed
}
</script>
</body>
</html>
This example updates a status message and logs the reset event to the console when the form is reset.
Contact Form Name: [ ] Phone: [ ] [Reset] [Submit] (Status message appears below after reset: "Form has been reset at 10:30:45 AM")
Key Points
-
The
onresetattribute is placed on the<form>element, not the reset button itself. -
The event fires when any reset button within the form is clicked or when
form.reset()is called programmatically. -
Returning
falsefrom the onreset function prevents the form from being reset. -
The onreset event occurs before the actual reset, allowing you to intercept and control the reset behavior.
-
You can use this event for confirmation dialogs, logging, cleanup operations, or updating the user interface.
Conclusion
The onreset attribute provides a powerful way to execute custom JavaScript code when a form is reset. Whether you need to show confirmations, perform cleanup, or log user actions, this event handler gives you full control over the form reset process while maintaining a clean and user-friendly interface.
286 Views
