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

Question

我试图用jQuery重置一些表单,但我遇到了一些麻烦.除了涉及编写函数或自定义插件的解决方案之外,我一直在寻找重置方法不是jQuery的标准部分,但它是标准Javascript的一部分.

无论如何,我的第一个方法就是去

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

表单的id ="theForm".

这显然不起作用,因为它假设reset()是jQuery的一部分.

接下来我尝试的是

document.getElementById(theForm).reset();

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

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

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

要么

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

在涉及这两个片段的每篇文章中,评论中的每个人都已经开始工作了.

除了我.

错误控制台一直告诉我,我写的东西不存在.我已经检查了所有代码,并且没有"reset"这个单词的其他实例,所以也不可能.

无论如何,我很难过.

Answer 1

解决此线程中的原始问题

对于这样的HTML表单:

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

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

reset()不是一个函数

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

Answer 2

这个:

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

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

因此,无论是表单还是将脚本附加到按钮的方式都存在问题.

Answer 3

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

演示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>