JavaScript form.reset()
last modified April 2, 2025
In this article, we explore the form.reset() method in JavaScript.
This method is essential for form handling, allowing developers to reset form
fields to their default values with a single function call.
Basic Definition
The reset() method resets all form controls to their initial values.
This method performs the same action as clicking a form's reset button.
When called, it clears all user input and returns form fields to their default states. This includes text inputs, checkboxes, radio buttons, and select menus.
Basic form.reset()
This example demonstrates how to reset a simple form using JavaScript.
<!DOCTYPE html>
<html>
<head>
<title>Basic form.reset()</title>
</head>
<body>
<form id="myForm">
<input type="text" value="Default">
<input type="checkbox" checked>
<button type="button" onclick="resetForm()">Reset Form</button>
</form>
<script>
function resetForm() {
document.getElementById('myForm').reset();
}
</script>
</body>
</html>
In this basic example, we have a form with a text input and checkbox. The JavaScript code resets the form when the button is clicked, returning all fields to their initial values.
The reset() method is called on the form element, which we access
using getElementById. This demonstrates the simplest usage of form
reset functionality.
Resetting Specific Form Fields
This example shows how to reset specific fields while leaving others unchanged.
<!DOCTYPE html>
<html>
<head>
<title>Partial Form Reset</title>
</head>
<body>
<form id="userForm">
<input type="text" id="username" placeholder="Username">
<input type="email" id="email" placeholder="Email">
<select id="country">
<option value="">Select country</option>
<option value="us">United States</option>
<option value="uk">United Kingdom</option>
</select>
<button type="button" onclick="resetUsername()">Reset Username</button>
<button type="button" onclick="resetForm()">Reset All</button>
</form>
<script>
function resetUsername() {
document.getElementById('username').value = '';
}
function resetForm() {
document.getElementById('userForm').reset();
}
</script>
</body>
</html>
Here we have a form with multiple fields and two reset buttons. One button resets just the username field, while the other resets the entire form.
This demonstrates the difference between resetting individual fields and using
the reset() method. The full reset returns all fields to their
default values, not necessarily empty.
Resetting Form After Submission
This example demonstrates resetting a form after successful submission.
<!DOCTYPE html>
<html>
<head>
<title>Post-Submission Reset</title>
</head>
<body>
<form id="contactForm" onsubmit="handleSubmit(event)">
<input type="text" id="name" placeholder="Your Name" required>
<textarea id="message" placeholder="Your Message" required></textarea>
<button type="submit">Send Message</button>
</form>
<script>
function handleSubmit(event) {
event.preventDefault();
// Simulate form processing
setTimeout(() => {
alert('Form submitted successfully!');
document.getElementById('contactForm').reset();
}, 1000);
}
</script>
</body>
</html>
In this example, the form is reset after a simulated submission process. The
reset() method is called after showing a success message.
This pattern is common in AJAX form submissions where you want to clear the form after successful server processing but maintain the page state.
Resetting Form with Default Values
This example shows how reset works with different default values.
<!DOCTYPE html>
<html>
<head>
<title>Default Values Reset</title>
</head>
<body>
<form id="settingsForm">
<input type="text" value="Admin">
<input type="range" min="0" max="100" value="50">
<select>
<option value="light">Light Theme</option>
<option value="dark" selected>Dark Theme</option>
</select>
<button type="button" onclick="resetSettings()">Reset to Defaults</button>
</form>
<script>
function resetSettings() {
document.getElementById('settingsForm').reset();
}
</script>
</body>
</html>
This form contains fields with various default values. The reset button returns all fields to these predefined defaults, not empty values.
The reset() method respects the original HTML attributes like
value, checked, and selected when
restoring form state.
Custom Reset Confirmation
This example adds a confirmation dialog before resetting the form.
<!DOCTYPE html>
<html>
<head>
<title>Confirm Reset</title>
</head>
<body>
<form id="surveyForm">
<textarea placeholder="Your feedback"></textarea>
<button type="button" onclick="confirmReset()">Clear Form</button>
</form>
<script>
function confirmReset() {
if (confirm('Are you sure you want to clear all your answers?')) {
document.getElementById('surveyForm').reset();
}
}
</script>
</body>
</html>
Here we use the confirm() dialog to prevent accidental form resets.
The form only resets if the user confirms their intention.
This is a good practice for forms where users might spend significant time entering data, providing a safeguard against accidental data loss.
Source
MDN form.reset() Documentation
In this article, we have shown how to use the form.reset() method
in JavaScript. This method is essential for form handling and user experience
in web applications.
Author
List all JS DOM tutorials.