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

Question

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

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

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

表单的 id="theForm"。

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

接下来我尝试的是

document.getElementById(theForm).reset();

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

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

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

或

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

在每一篇涉及这两个 sn-ps 的文章中，cmets 中的每个人都已经开始使用它。

除了我。

错误控制台一直告诉我我所写的内容不存在。我检查了我所有的代码，没有“重置”这个词的其他实例，所以也不可能是这样。

不管怎样，我被难住了。

Answer 1

这个：

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

工作得很好。在这里观看：http://jsfiddle.net/tZ99a/1/

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

Answer 2

所以...我认为这里发生了一些事情。

1. 正如 Diego 在他的回答中指出的那样，$('#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" 必须在表单标签上，而不是在表单内的输入标签上。

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

Answer 3

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

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

Answer 4

本帖原问题的解决方案

对于这样的 HTML 表单：

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

使用document.getElementById("theForm").reset()时，如果你得到一个js错误提示

reset() 不是函数

原因可能是一个元素将reset 设置为name 或id。我遇到了同样的问题。
将任何元素命名为 reset 会覆盖 reset() 函数。

Answer 5

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

Answer 6

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

我遇到了同样的问题，后来终于想通了，把我的表格改成：

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

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

Answer 7

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

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>

相同的演示，但 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>

相同的演示，但使用 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>

Answer 8

试试这个：

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