Question

我正在使用以下代码重置表单字段。

document.getElementById("form1").reset();//form1 is the form id.

它不起作用。我也试过JQuery。甚至JQuery也无法正常工作。

$("#reset").click(function(){
$('form1')[0].reset();
});

我的HTML代码是

<form name="form1" id="form1" method="post">
<h3>Personal Information</h3>
<h4>Name</h4>
<input type="text" id="fname" name="fname" maxlength=50 size=11/>
<input type="text" id="mname" name="mname" maxlength=15 size=8/>
<input type="text" id="lname" name="lname" maxlength=50 size=11/>
<input type="button" id="reset" value="Reset" onclick="Reset()"/>
</form>

我正在关注W3Schools。这是我的Fiddle。你能解释一下这个错误吗？

Answer 1

问题是您将按钮ID设置为"reset"。因此，您的表单重置方法被按钮元素覆盖。只需为您的按钮使用不同的ID。

<form name="form1" id="form1" method="post">

<h3>Personal Information</h3> 

<h4>Name</h4>

    <input type="text" id="fname" name="fname" maxlength="50" size="11" />
    <input type="text" id="mname" name="mname" maxlength="15" size="8" />
    <input type="text" id="lname" name="lname" maxlength="50" size="11" />
    <input type="button" id="resetBtn" value="Reset" />
</form>

另外，请避免使用内联事件处理程序。将事件绑定在实际脚本中。
请参阅此fiddle。

Answer 2

我终于解决了我的问题。问题是"id=reset"。因为它会覆盖reset方法。我将其更改为id="reset1"。现在它正在运作

Answer 3

您是否只是试一试：Reset

<input type="reset" value="Reset"/>

Answer 4

看起来你的选择$（'form1'）就像一个标签名为form1的元素，而我认为你实际上想要通过id选择它：

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

Answer 5

使用jQuery，正确的选择器是：

$('#form1') // Select with ID

OR

$('form[name=form1]') // Select with name

Answer 6

如果您的目标只是重置表单，可以尝试：

<input type="reset" id="reset" value="Reset" onclick="this.form.reset();"/>

Answer 7

我已更新了您的fiddle。

为什么vanilla js没有工作：

你没有......

document.getElementById("form1").reset();//form1 is the form id.

...在重置功能中。你可以这样做：

function Reset() {
    document.getElementById("form1").reset();//form1 is the form id.
}

为什么jQuery不起作用：

你不需要做你正在做的所有事情。它比这简单得多。另外，请查看您的表格1＆＃39;选择。您应该添加＃form;＃form1＆＃39;代替。 jQuery选择与getElementByID函数不同。正如您可以通过名称假设的那样，getElementByID函数已经通过ID获取元素;但是使用jQuery，你必须指定那些东西。另外，不需要使用jquery的onClick属性。

Answer 8

好的，看看我的新jsfiddle： http://jsfiddle.net/ty9rU/17/ 所以我将按钮重命名为reset_btn

基本上你在表单中有一个名为reset的元素，这导致了这个问题。

表单重置无效

8 个答案: