TypeError: form.reset not a function in JavaScript [Solved]

# TypeError: form.reset not a function in JavaScript [Solved]

The "TypeError: 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 parentheses when calling reset, e.g. reset()().

typeerror form reset is not a function

# Only call the `reset()` method on a `form` element

If you use jQuery and got 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

Copied!
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. We would get the error if we had called the method on the collection.

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

index.html

Copied!
<!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

Copied!
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

Copied!
<!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

Copied!
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 a type of reset.

If the error persists, make sure you don't have a second set of parentheses 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

Copied!
<!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

Copied!
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.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

TypeError: form.reset not a function in JavaScript [Solved]

# TypeError: form.reset not a function in JavaScript [Solved]

# Only call the reset() method on a form element

Borislav Hadzhiev

# Only call the `reset()` method on a `form` element