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

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（）不是函数

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

Answer 2

此：

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

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

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

Answer 3

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

与name!="reset"相同的演示 - 没有错误;代码工作

＆＃13;

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

＆＃13;

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

＆＃13;

与id="reset"进行相同的演示 - 检查控制台

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

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

如果您可以在此处提供HTML代码，那就太棒了。）

Answer 5

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

正如迭戈在答案中指出的，$('#theForm')[0].reset();效果很好。
您尝试过的第二个示例：document.getElementById(theForm).reset();将无效，因为javascript会认为您正在使用名为“theForm”的变量 - 如果是这种情况，那么变量的值必须是表示表单id的字符串...类似于var theForm = 'theForm';，可能会非常快速地混淆。我怀疑你的意思是：document.getElementById('theForm').reset(); - 游泳方式起作用，与＃1的代码基本相同。
这些示例都假设您的HTML类似于：<form id="theForm"> ... </form> - id“theForm”必须位于表单标记上，而不是表单中的输入标记。

我创造了一个小提琴，展示了这些工作：http://jsfiddle.net/boliver/ZDQxE/

Answer 6

请检查您是否没有名为＆＃39; reset＆＃39;的表单元素。如果是这样，重命名它，.reset（）方法将起作用。否则document.getElementById（＆＃34; formId＆＃34;）。reset将选择名称为＆＃39; reset＆＃39;的表单元素，这就是reset（）方法无法正常工作的原因。哟会得到错误消息，例如＆＃39;对象不是函数＆＃39;。

Answer 7

问题很可能是表单的重置按钮ID设置为＆＃34; reset＆＃34;，因此出现错误消息。

我遇到了同样的问题，然后终于想出来并将我的表格改为：


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

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

Answer 8

尝试一下：

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

$（“...”）[0] .reset不是函数...重置jQuery中的表单

8 个答案:

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