Question

为什么不清除表单内容？我尝试应用我在资源中看到的格式，其他一切都运行正常。

此时的重置按钮会执行除清除输入字段外应执行的所有操作。我在DevTools中没有错误。

  <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" align:"right" type="text" name="age" id="age"> <br>
            </div>
          </div>

           <div class="buttons">
            <input type="submit" id="submit" class="btn btn-primary" onsubmit="valfunc();">
            <input type="reset" id="resetbutton" class="btn btn-default" onreset="resetfunc()">
           </div>
        </form>

以下是我的功能：

    <script>
        function resetfunc(){
          var form = document.getElementById("myForm");
          form.reset();
          document.getElementById("output").innerHTML = "";
          document.getElementById("cnfrm").className.clear;
          document.getElementById("output").style.visibility = "hidden";
          return false;
    </script>

Answer 1

有一些小东西，比如“}”和“;”在您的代码中，您需要修复以使resetfunc（）工作。看看https://jsfiddle.net/alant/nvoztmh3/。

<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" align:"right" type="text" name="age" id="age"> <br>
            </div>
          </div>

           <div class="buttons">
            <input type="submit" id="submit" class="btn btn-primary" onsubmit="valfunc()">
            <input type="reset" id="resetbutton" class="btn btn-default" onreset="resetfunc()">
           </div>
        </form>

function resetfunc(){
          var form = document.getElementById("myForm");
          form.reset();
          //document.getElementById("output").innerHTML = "";
          //document.getElementById("cnfrm").className.clear;
          //document.getElementById("output").style.visibility = "hidden";
          console.log("resetfunc");
          return false;
}

您将看到控制台输出“resetfunc”。如果它为您清除，请告诉我。

Answer 2

您不需要JS来重置表单，只需用以下命令替换重置按钮：

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

Answer 3

删除表单标记中的onreset="return resetfunc()"，然后在onsubmit处理程序中进行清理（form.reset（）等）。

Answer 4

这个问题主要是因为return false会取消reset事件而您不希望这样做，所以请删除该行。

此外，您在函数末尾没有结束}，您的函数指的是HTML中不存在的output元素，className.clear应该是className = ""。

最后，您不应该首先使用内联HTML事件属性（onreset，onclick等）。这就是20多年前事件处理的完成方式，而且由于很多人只是复制其他人的HTML，因此使用该技术不会死亡。有 many reasons why you should not use this outdated technique 。相反，您应该遵循现代标准和最佳实践。完全将您的HTML与JavaScript分开，并使用.addEventListener()注册事件。

我已更新您的代码以遵循这些现代标准。

// Get all the DOM element references you'll need to use, just once:
const form = document.getElementById("myForm");
const output = document.getElementById("output");
const cnfrm = document.getElementById("cnfrm");

// Register your event handler(s)
form.addEventListener("submit", valfunc);
form.addEventListener("reset", resetfunc);

function valfunc(){
  // Submit code here
}

function resetfunc(){
  form.reset();
  document.getElementById("output").innerHTML = "";  
  cnfrm.className = "";
  document.getElementById("output").style.visibility = "hidden";
}

<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" align:"right" 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">test</div>

如何获取javascript重置表单？

4 个答案: