用JavaScript提交后清除表单

Clear form after submission in JavaScript

本文关键字：清除 表单 提交 JavaScript      更新时间：2023-09-26

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

我只是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>

给表单一个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>

您没有将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

相关文章：