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

问题:

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.

回答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.

回答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.

回答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>

回答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 :)

回答5:

So... I think there are a few things going on here.

1. As Diego pointed out in his answer, $('#theForm')[0].reset(); works very well.
2. The second example you tried: document.getElementById(theForm).reset(); won't work because javascript is going to think that you're using a variable called "theForm" -- if that were the case then the variable's value would have to be the string representing the id of your form... something like var theForm = 'theForm'; and that can get really confusing really fast. I suspect what you meant to try was: document.getElementById('theForm').reset(); -- which works swimmingly and is basically the same thing as the code from #1.
3. These examples are all assuming that your HTML is something like: <form id="theForm"> ... </form> -- the id "theForm" must be on the form tag, not on an input tag within the form.

I've created a fiddle that shows these things working: http://jsfiddle.net/boliver/ZDQxE/

回答6:

Please check that you don't have a form element named 'reset'. If so, rename it and .reset() method will be working. Otherwise document.getElementById("formId").reset will select form element with name 'reset', that's why reset() method can't be working. Yo will get error message like 'object is not a function'.

回答7:

The problem is most likely that the form's reset button id is set to "reset", thus the error message.

I had the same problem and then finally figured out and changed my form to:

      form action="bla" method="post" id="myform">     ...          /form>  

Changing the reset button id did the trick for me.

文章来源: $(“…”)[0].reset is not a function… resetting forms in jQuery