18

我正在尝试使用 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();

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

除了我。

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

无论如何，我很难过。

4

9 回答 9

43

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

对于这样的 HTML 表单：

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

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

reset() 不是函数

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

于 2014-03-26T04:40:43.730 回答
18

这个：

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

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

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

于 2013-05-27T20:59:31.753 回答
6

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

于 2015-06-17T01:13:10.203 回答
2

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

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

于 2013-10-08T19:04:17.107 回答
0

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

于 2014-09-28T10:55:03.323 回答
0

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.

于 2015-01-21T23:50:45.267 回答
0

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

  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/

于 2013-10-04T03:24:44.870 回答
0

在我更改之前，上述解决方案都不适合我

<div class="form" id="myForm">...</div>

至

<form class="form" id="myForm">...</form>

现在这两种方法都可以在我的 javascript 代码中使用：

$('#myForm').get(0).reset();

和

$('#myForm')[0].reset();
于 2022-01-29T05:10:18.360 回答
0

尝试这个：

$('#formData')[0].reset();
于 2019-12-28T08:00:33.317 回答