$("...")[0].reset is not a function... resetting forms in jQuery

Question

I'm trying to reset some forms with jQuery but I'm having some trouble. Aside from solutions that involve writing functions or custom plugins, I keep finding time and again that the reset method is not a standard part of jQuery but it is a part of standard Javascript.

Anyway, my first approach was to go with

$("#theForm").reset();

where the form's id="theForm".

That didn't work obviously, because it assumed that reset() was a part of jQuery.

The next thing I tried was

document.getElementById(theForm).reset();

Which didn't work either. I'm new to jQuery so I'm not sure if I can mix normal Javascript with jQuery. I must sound like a moron for saying this.

Anyway, After doing some more researching I found time and again that I could use reset() in jQuery by doing these...

$("#theForm")[0].reset();

or

$("#theForm").get(0).reset();

In every article that involves these two snippets everyone in the comments had gotten it working.

Except me.

The error console keeps telling me that what I have written does not exist. I have checked all of my code and there is no other instance of the word "reset", so it can't be that either.

Anyway, I'm stumped.

Answer 1

Solution to original issue in this thread

For an HTML form like this:

<form id="theForm">
</form>

When using document.getElementById("theForm").reset(), if you are getting a js error saying

reset() is not a function

the reason might be an element which has reset as name or id. I faced same issue.
Naming any element as reset overrides reset() function.

Answer 2

This:

$("#theForm")[0].reset();

works just fine. Watch it here: http://jsfiddle.net/tZ99a/1/

So, there has to be something wrong either with the form, or with the way you are attaching the script to the button.

Answer 3

The error is caused by giving the reset button (or any other form element) the name reset -- name="reset". Thus form.reset resolves to the DOM element with name="reset" and not the reset method.

DEMO WITH name="reset" - check console

$(function() {
    $('.reset1').on('click', function() {
        this.form.reset();
    });
  
    $('.reset2').on('click', function() {
        $('form')[0].reset();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
  <input type="text" name="somename"/><br/>
  <input type="button" name="reset" class="reset1" value="Reset - form.reset()"/><br>
  <input type="button" name="reset" class="reset2" value="Reset - $('form')[0].reset()"/>
</form>

SAME DEMO BUT WITH name!="reset" - no error; code works

$(function() {
    $('.reset1').on('click', function() {
        this.form.reset();
    });
  
    $('.reset2').on('click', function() {
        $('form')[0].reset();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
  <input type="text" name="somename"/><br/>
  <input type="button" name="someothername" class="reset1" value="Reset - form.reset()"/><br>
  <input type="button" name="someothername" class="reset2" value="Reset - $('form')[0].reset()"/>
</form>

SAME DEMO BUT WITH id="reset" - check console

$(function() {
    $('.reset1').on('click', function() {
        this.form.reset();
    });
  
    $('.reset2').on('click', function() {
        $('form')[0].reset();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
  <input type="text" name="somename"/><br/>
  <input type="button" id="reset" class="reset1" value="Reset - form.reset()"/><br>
  <input type="button" id="reset" class="reset2" value="Reset - $('form')[0].reset()"/>
</form>

Answer 4

if "theForm" is an ID, do we need to use $('#theForm')[0] ? I think it is a wrong habit. If there are more forms in an HTML page, use names. And if you use ID, it should be unique.

It would be great if you can provide your HTML code here :)