$("...")[0].reset 不是函数...在 jQuery 中重置表单

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

提问by user2426162

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.

我正在尝试使用 jQuery 重置一些表单，但遇到了一些麻烦。除了涉及编写函数或自定义插件的解决方案外，我一次又一次地发现 reset 方法不是 jQuery 的标准部分，而是标准 Javascript 的一部分。

Anyway, my first approach was to go with

无论如何，我的第一种方法是使用

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

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

where the form's id="theForm".

其中表单的 id="theForm"。

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

这显然不起作用，因为它假定 reset() 是 jQuery 的一部分。

The next thing I tried was

我尝试的下一件事是

document.getElementById(theForm).reset();

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.

这也不起作用。我是 jQuery 的新手，所以我不确定是否可以将普通的 Javascript 与 jQuery 混合使用。我说这话听起来一定像个白痴。

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

无论如何，在做了一些更多的研究之后，我一次又一次地发现我可以通过执行这些在 jQuery 中使用 reset() ......

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

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

or

或者

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

$("#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.

无论如何，我很难过。

回答by Sanjeev

Solution to original issue in this thread

此线程中原始问题的解决方案

For an HTML form like this:

对于这样的 HTML 表单：

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

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

使用时document.getElementById("theForm").reset()，如果您收到 js 错误提示

reset() is not a function

reset() 不是函数

the reason might be an element which has resetas nameor id. I faced same issue.
Naming any element as resetoverrides reset() function.

原因可能是具有resetasname或的元素id。我遇到了同样的问题。
将任何元素命名为reset覆盖 reset() 函数。

回答by Diego Mijelshon

This:

这个：

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

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

工作得很好。在这里观看：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.

因此，表单或将脚本附加到按钮的方式一定有问题。

回答by PeterKA

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

该错误是由给重置按钮（或任何其他表单元素）的名称 reset -- 引起的name="reset"。因此form.reset使用name="reset"而不是 reset 方法解析为 DOM 元素。

DEMO WITH name="reset"- check console

DEMO WITH name="reset"- 检查控制台

$(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

相同的演示但带有name!="reset"- 没有错误；代码有效

$(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

相同的演示但带有id="reset"- 检查控制台

$(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>

回答by smilyface

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.

如果"theForm"是ID，我们需要使用$('#theForm')[0]吗？我认为这是一个错误的习惯。如果 HTML 页面中有更多表单，请使用名称。如果您使用 ID，它应该是唯一的。

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

如果您能在这里提供您的 HTML 代码，那就太好了 :)

回答by Brian Oliver

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.

1. 正如迭戈在他的回答中指出的那样，$('#theForm')[0].reset();效果很好。
2. 您尝试的第二个示例： document.getElementById(theForm).reset();不会工作，因为 javascript 会认为您正在使用一个名为“theForm”的变量——如果是这种情况，那么该变量的值必须是表示表单 ID 的字符串......类似的东西var theForm = 'theForm';很快就会变得非常混乱。我怀疑你想尝试的是： document.getElementById('theForm').reset();- 它可以很好地工作并且与＃1中的代码基本相同。
3. 这些示例都假设您的 HTML 类似于： <form id="theForm"> ... </form>-- id“theForm”必须在表单标签上，而不是在表单中的输入标签上。

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

我创建了一个显示这些东西工作的小提琴：http: //jsfiddle.net/boliver/ZDQxE/

回答by Hafiz Usman

try this:

尝试这个：

$('#formData')[0].reset();

回答by v.babak

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'.

请检查您是否没有名为“reset”的表单元素。如果是这样，重命名它并且 .reset() 方法将起作用。否则 document.getElementById("formId").reset 将选择名称为 'reset' 的表单元素，这就是 reset() 方法无法工作的原因。你会收到类似“对象不是函数”的错误消息。

回答by user4426017

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

问题很可能是表单的重置按钮 id 设置为“重置”，因此出现错误消息。

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.

更改重置按钮 ID 对我有用。