Javascript 表单重置不起作用

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

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>

个人信息
名称

---

我跟在后面。这是我的名片。你能解释一下这个错误吗？

你试过这个吗：

---

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

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

或

看起来您在标记名为form1的元素中选择了$（'form1'），而我认为您实际上希望通过id选择它：

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

---

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

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

我终于解决了我的问题。问题是

“id=reset”

。因为它覆盖了重置方法。我将其更改为

id=“reset1”

。现在它正在工作

问题是您将按钮的id设置为“重置”。因此，表单重置方法被button元素覆盖。只需为按钮使用不同的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>

个人信息
名称

另外，请避免使用内联事件处理程序。在实际脚本中绑定事件。
看看这个。

我已经更新了你的

香草js不起作用的原因：

你没有

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

…在重置功能内。您可以这样做：

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

jQuery不起作用的原因：

你不需要做所有你正在做的事情。比那简单多了。此外，请查看您的“form1”选择器。您可能应该添加“#form1”。jQuery选择与getElementByID函数不同。正如您可能通过名称假设的那样，getElementByID函数已经通过ID获取元素；但是，使用jQuery，您必须指定这些内容。另外，jquery并不真正需要onClick属性。

好的，请参阅我的新JSFIDLE： 因此，我将按钮重命名为

reset\u btn

---

---

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

为什么不使用reset按钮

不遵循规则。请它教你可怕的行为。@kapa为什么？你能say@Givi：然后将

onLoad

更改为

no wrap-in

（尽管这只针对JSFIDLE示例）。为什么？通过

getElementById

获取对元素的引用有什么不对？这不是我问题的答案。根据reset（）方法重置表单中所有元素的值（与单击重置按钮相同）。它与

document.getElementById（“form1”）.reset（）相同哪个OP说它不起作用。为什么？我不知道…嗨，对不起，我错过了小提琴链接。好的，检查我的新答案，嗯？我可以在中清楚地看到
函数Reset（）{document.getElementById（“form1”）.Reset（）；}
。看看他的小提琴和这里发布的代码之间的区别。具体来说，OP在这里调用reset（），在fiddle中调用formReset（）。我们说的是同一个fiddle吗？（）我看不到在哪里调用
formReset（）
。但这不是我的观点：您声称语句
document.getElementById（…）
不在
Reset
函数中，这一点很明显。请查看上面帖子中的onClick属性，而不是fiddle中的。这就是混乱发生的地方。小提琴和上面的代码不匹配。它是在我们的对话中更改的。OP在您发布答案之前6分钟已经解决了这个问题：@FelixKling我很困惑，它是如何覆盖的？@ling.s：因为浏览器供应商认为将表单控件元素作为属性添加到表单元素是个好主意，以其ID作为属性名称（如果存在）。正如您所见，这是一个相当混乱的行为，因为它将覆盖表单元素的其他现有属性。“值得注意的是，所有属性都需要在HTML中引用（偶数）”，这是不正确的：。仅当属性包含特定字符（例如空格或
字符）时，才必须引用属性。查看链接了解更多信息。哇，我不知道。我想这只适用于XML。但是，如果你引用价值观，也没有什么坏处。无论如何都要编辑它。是的，在XML（以及XHTML）中，您必须将属性值放在双引号中。但是HTML是一种不那么严格的标记语言，这是最简单的解决方案
document.getElementById("form1").reset();//form1 is the form id.

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