jQuery / javascript无法重置表单[重复]答案

【问题标题】：jQuery / javascript cannot reset a form [duplicate]jQuery / javascript无法重置表单[重复]
【发布时间】：2015-09-02 00:19:23
【问题描述】：

我一直在尝试使用jQuery来重置表单

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

不起作用。使用trigger() 也不行

$('#check_in_form').trigger("reset");

当我使用这两种方法时，我的浏览器控制台上出现此错误

TypeError: $(...)[0].reset is not a function

使用纯 Javascript 也不行。

getElementById("check_in_form").reset();

我终于不得不求助于“点击”重置按钮

$('#reset').click();

这可能是什么问题？ jQuery 正在这个页面上工作，因为我在页面的其他部分严重依赖它。

【问题讨论】：

你会做一个小提琴吗？ trigger('reset') 应该是这样做的方法。我认为它不起作用的唯一方法是$('#check_in_form') 没有返回任何东西。使用纯 jquery 不起作用，因为 reset 是 jquery 方法
在这里工作jsfiddle.net/jvbqt8yv。你的其余代码在哪里？
确保 check_in_form 是表单 ID，而不是重置按钮 ID。
感谢@PhilVarg，user86745458。网页分成许多不同的文件，清理内容的工作量太大。 PeterKA 的回答明确了这一点。为什么人们投反对票而不是提出澄清问题？我不在乎声望点，但这会让新用户望而却步。

标签： javascript jquery forms

【解决方案1】：

你很可能有：

<input type="reset" name="reset" id="reset"/>

问题在于 name="reset"。在 JS 中，form.reset 引用了这个 DOM 元素，因此会导致与 reset() 方法的名称冲突。

因此form.reset() ----> TypeError: $(...)[0].reset is not a function 就是这个意思。

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

input[name=reset] {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="radio" name="gender" value="A"/> A
  <input type="radio" name="gender" value="B"/> B
  <input type="radio" name="gender" value="C"/> C
  <input type="reset" name="reset"/>
  <button id="reset">Click To Reset</button>
</form>

【讨论】：

谢谢@PeterKA。这正是问题所在。我不明白你为什么将我的问题标记为重复。在今天发布之前，我已经查看了 all 使用 jQuery 在 stackoverflow、MDN 和 jQuery 文档中重置 HTML 表单的问题。没有人傻到将按钮命名为 id="reset"。这个问题可能对有确切问题的人有用
@hanxue 你是对的。唯一具有相同错误的其他问题似乎没有任何好的答案：stackoverflow.com/questions/16780005/…。我已投票决定重新提出问题。
澄清一下，问题出在name 属性上，而不是id 属性上？
我最初将name 和id 都设置为reset。将两者都更改为reset_button 以解决问题。
谢谢。正如 hanxue 预测的那样，这个确切的问题导致了我的问题，而 PeterKA 的回答帮助确定了问题。就我而言，我不是在创建 DOM，而是在制作用户脚本，所以我想我要么不得不在输入上使用 .click() ，要么使用 .setAttribute() 来更改名称属性（虽然可能不会，因为它可能会弄乱其他东西）？

【解决方案2】：

这是为你工作的 JS。 vanilla js 和 JQuery。

https://jsfiddle.net/scheda/5e0h3wxc/

//vanilla JS
var button = document.querySelector('#form1-button');
button.addEventListener('click', function(e) {
    e.preventDefault(); 
    document.querySelector('#form1').reset();
});

//JQuery
$('#form2-button').click(function(e) {
    e.preventDefault();
    $('#form2')[0].reset();
});

【讨论】：