在 JavaScript 中提交后清除表单答案

【问题标题】：Clear form after submission in JavaScript在 JavaScript 中提交后清除表单
【发布时间】：2023-03-22 21:50:02
【问题描述】：

我看到这个问题已被多次询问，但在尝试了所有不同的组合后，我仍然无法在提交时清除表单。

我只是 HTML 和 JS 的初学者，所以我的代码有点不连贯，而且缩进不是很好。

<html>
<body>
<style>
body{ background-color:powderblue;}
h1{text-align:center}
h1{color:purple;}
</style>
<h1>Fill up the details</h1>
<form name="myform">
Name:    <input type="text" value="" name="name"\>
<br>
<br>
Class: <input type="text" value="" ></td>
<br>
<br>
Register No.: <input type="number" value="" >
<br>
<br>
Username:    <input type="text" value="" name="username"\>
<br>
<br>
Password:    <input type="password" value="" name="password1"\>
<br>
<br>
Re-enter Password:    <input type="password" value="" name="password2"\>
<br>
<br>
Mobile No.: <input type="number" value="" \>
<br>
<br>
Email: <input type="text" value="" \>
<br>
<br>
</form>
<script type="text/javascript">
function show_alert()
{  
var name=document.myform.name.value;  
var password1=document.myform.password1.value;  
var password2=document.myform.password2.value; 
if (name==null || name=="")
{  
alert("Name can't be blank");  

}
else if(password1!=password2)
{  
alert("password must be same!");  
return false;  
}  
else if(password1.length<6)
{  
alert("Password must be at least 6 characters long.");  
return false;  
} 
else 
{
alert("Your account has been created!!!!!");
return false;
}
function reset()
{
var form=document.getElementById("myform");
form.reset();
alert("Form has been reset.");
}
}
</script>
<input type="button" value="Submit" onclick="show_alert()"/>
<input type="button" value="Reset" onclick="reset()"/>
</body>
</html>

【问题讨论】：

这个副本的副本：stackoverflow.com/questions/14589193/…

标签： javascript html

【解决方案1】：

给您的表单一个 id 并使用以下脚本

<script>
function myFunction() {
    document.getElementById("myForm").reset();
}
</script>

演示

<form id="myForm">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br><br>
  <input type="button" onclick="myFunction()" value="Reset form">
</form>

<script>
function myFunction() {
    document.getElementById("myForm").reset();
}
</script>

【讨论】：

由于某种原因，它仍然没有清除页面上的表单。我按照你说的做了，还是不行。。

【解决方案2】：

您没有为表单设置 ID，而是在 Javascript 代码中使用它：)

<html>
  <body>
    <style>
      body{ background-color:powderblue;}
      h1{text-align:center}
      h1{color:purple;}
    </style>
    <h1>Fill up the details</h1>
    <form name="myform" id="myform">
      Name:    <input type="text" value="" name="name"\>
      <br>
      <br>
      Class: <input type="text" value="" ></td>
    <br>
    <br>
    Register No.: <input type="number" value="" >
    <br>
    <br>
    Username:    <input type="text" value="" name="username"\>
    <br>
    <br>
    Password:    <input type="password" value="" name="password1"\>
    <br>
    <br>
    Re-enter Password:    <input type="password" value="" name="password2"\>
    <br>
    <br>
    Mobile No.: <input type="number" value="" \>
    <br>
    <br>
    Email: <input type="text" value="" \>
    <br>
    <br>
    </form>
  <script type="text/javascript">
    function show_alert()
    {  
      var name=document.myform.name.value;  
      var password1=document.myform.password1.value;  
      var password2=document.myform.password2.value; 
      if (name==null || name=="")
      {  
        alert("Name can't be blank");  

      }
      else if(password1!=password2)
      {  
        alert("password must be same!");  
        return false;  
      }  
      else if(password1.length<6)
      {  
        alert("Password must be at least 6 characters long.");  
        return false;  
      } 
      else 
      {
        alert("Your account has been created!!!!!");
        reset();
        return false;
      }
    }

    function reset(){
      console.log('reset called');
      var form=document.getElementById("myform");
      form.reset();
      alert("Form has been reset.");
    }
  </script>
  <input type="button" value="Submit" onclick="show_alert()" />
  <input type="reset" value="Reset" onclick="reset()" />
  </body>
</html>

PS。您也可以使用<input type='reset'> 重置表单。更多信息在这里：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

【讨论】：