如何用JavaScript重置表单？为何我的重置按钮无法清空输入框？

咱们来一步步拆解问题根源，然后针对性修复：

1. 核心问题：阻止了浏览器的默认重置行为 #

你的resetfunc函数最后返回了false，而表单的onreset="return resetfunc()"会把这个返回值传递给浏览器——当返回false时，浏览器会取消默认的表单重置动作，这就是重置按钮失效的关键！

而且你在函数里已经手动调用了form.reset()，其实完全没必要：浏览器默认的重置行为就会自动清空所有输入框，手动调用反而多此一举，再加上return false直接把默认行为掐断了。

2. 修复className.clear的语法错误 #

代码里的document.getElementById("cnfrm").className.clear;是无效写法，className是字符串类型，没有clear方法。如果要移除这个元素的所有类名，应该改成：

// 方式1：清空类名字符串
document.getElementById("cnfrm").className = "";
// 方式2：用更现代的classList API
document.getElementById("cnfrm").classList.clear();

3. 移除重复的事件绑定 #

你的提交按钮上额外加了onsubmit="valfunc();"，但表单标签已经有onsubmit="return valfunc()"了，重复绑定可能引发不必要的冲突，建议删掉按钮上的这个属性。

修复后的完整代码 #

HTML部分 #

<form id="myForm" onsubmit="return valfunc()" onreset="return resetfunc()">
  <div class="container">
    <div id="usrnm">
      <label class="control-label">Username: </label>
      <input class="form-control" type="text" name="username" id="username">
    </div>
    <div id="pswrd">
      <label class="control-label">Password: </label>
      <input class="form-control" type="password" name="password" id="password">
    </div>
    <div id="cnfrm">
      <label class="control-label">Confirm: </label>
      <input class="form-control" type="password" name="confirm" id="confirm">
    </div>
    <div id="ag">
      <label class="control-label">Age: </label>
      <input class="form-control" type="text" name="age" id="age">
      <br>
    </div>
  </div>
  <div class="buttons">
    <input type="submit" id="submit" class="btn btn-primary">
    <input type="reset" id="resetbutton" class="btn btn-default">
  </div>
</form>
<div id="output"></div>

JavaScript部分 #

function resetfunc(){
  // 执行你的额外重置逻辑
  document.getElementById("output").innerHTML = "";
  document.getElementById("output").style.visibility = "hidden";
  // 修复类名清空的写法
  document.getElementById("cnfrm").classList.clear();
  
  // 返回true，允许浏览器执行默认的重置动作
  return true;
  // 或者直接省略return语句，因为默认返回undefined，浏览器也会执行默认行为
}

额外提示 #

如果你的valfunc是表单验证函数，记得它需要返回true（验证通过，允许提交）或false（验证失败，阻止提交）来控制表单提交逻辑。

这样修改后，重置按钮就能正常清空所有输入框，同时你需要的额外重置逻辑也能正常执行啦。

内容的提问来源于stack exchange，提问作者Peter