Question

我一直在尝试使用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正在处理这个页面，因为我非常依赖它来处理页面的其他部分。

Answer 1

很可能你有：

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

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

因此form.reset() ----＆gt; 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>

Answer 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();
});

jQuery / javascript无法重置表单

2 个答案: