Solve - form.reset not a function Error in JavaScript

avatar

Borislav Hadzhiev

Wed Oct 20 20213 min read

banner

Photo by Andrew Ly

Solve - form.reset not a function Error #

The "form.reset is not a function" error occurs for multiple reasons:

  • setting the name or id property of a form element to "reset"
  • calling the reset() method on a collection of elements instead of a form element.
  • placing a second set of parenthesis when calling reset, e.g. reset()().

typeerror form reset is not a function

If you are using jQuery and getting the error "$(...).reset is not a function", you are probably trying to call the reset method on a collection of elements, instead of calling it on the form element.

index.js
const form = document.getElementById('create_user_form'); function handleSubmit(event) { event.preventDefault(); console.log($('#create_user_form')); // ๐Ÿ‘‰๏ธ [form#create_user_form] // โœ… Works because we call `reset` on `form` element $('#create_user_form')[0].reset(); } form.addEventListener('submit', handleSubmit);
Notice that we had to access the element at index 0 to select the form element on which we can call the reset method. Had we called the method on the collection, we would get the error.

Here is an example of how the error occurs in JavaScript.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <form id="create_user_form"> <input type="text" name="first_name" /> <!-- โ›”๏ธ has id and name set to "reset" --> <input type="reset" id="reset" name="reset" /> <input type="submit" /> </form> <!-- โœ… load jQuery (optional) โœ… --> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous" ></script> <!-- โœ… Your JS script here โœ… --> <script src="index.js"></script> </body> </html>

Notice that the input element has an id and name attributes set to "reset" - this is the cause of the error.

Here is the related JavaScript code.

index.js
const form = document.getElementById('create_user_form'); function handleSubmit(event) { event.preventDefault(); console.log(form.reset); // ๐Ÿ‘‰๏ธ input#reset // โ›”๏ธ TypeError: form.reset is not a function form.reset(); } form.addEventListener('submit', handleSubmit);

What actually happens in our code is we override the value of form.reset to a field reference instead of a method, because we've set the id attribute to "reset".

When you console.log form.reset, it should be a function and not a reference to a field in the form.

Similarly, when you console.log the value you're calling the reset() method on, you should see an HTMLFormElement being printed to the console.

To solve the error, rename or remove the id and name attributes to not be set to "reset".

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <form id="create_user_form"> <input type="text" name="first_name" /> <!-- โœ… renamed `id` and `name` to NOT be "reset" --> <input type="reset" id="resetBtn" name="resetBtn" /> <input type="submit" /> </form> <!-- โœ… load jQuery โœ… --> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous" ></script> <!-- โœ… Your JS script here โœ… --> <script src="index.js"></script> </body> </html>

Now if you run the same JavaScript code everything will work as expected.

index.js
const form = document.getElementById('create_user_form'); function handleSubmit(event) { event.preventDefault(); console.log(form.reset); // ๐Ÿ‘‰๏ธ reset() {} // โœ… Works form.reset(); } form.addEventListener('submit', handleSubmit);

Notice that the value of form.reset is a function instead of a reference to the input field with type of reset.

If you are still getting the error, make sure you don't have a second set of parenthesis when calling the reset method on the form, e.g. form.reset()() and make sure you haven't misspelled reset.

In some rare scenarios, you might not be able to change or remove the id and name attributes. In that case, you can call the reset method on the HTMLFormElement interface.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <form id="create_user_form"> <input type="text" name="first_name" /> <!-- โ›”๏ธ has id and name set to "reset" --> <input type="reset" id="reset" name="reset" /> <input type="submit" /> </form> <!-- โœ… load jQuery (optional) โœ… --> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous" ></script> <!-- โœ… Your JS script here โœ… --> <script src="index.js"></script> </body> </html>

Here is the related JavaScript code.

index.js
const form = document.getElementById('create_user_form'); function handleSubmit(event) { event.preventDefault(); console.log(form.reset); // ๐Ÿ‘‰๏ธ input#reset // โœ… Works HTMLFormElement.prototype.reset.call(form); } form.addEventListener('submit', handleSubmit);

Even though accessing the reset property on the form element points to the reset input element and not the method, we can still reset the form by accessing the reset property on the HTMLFormElement interface.

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee