javascript - 表格重置不起作用

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"。这会自动覆盖内置的 reset method of the form element .

解决方案是为您的按钮使用不同的 id 属性。

所以代替:

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

使用类似的东西:

<input type="button" id="reset-button" value="Reset" />

查看此 fiddle .