admin管理员组

文章数量:1399980

I see this has been asked multiple times but after trying all different binations, I'm still unable to clear form upon submission.

I'm just a beginner in HTML and JS so my code is a bit incoherent and not very well indented. 

<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>

I see this has been asked multiple times but after trying all different binations, I'm still unable to clear form upon submission.

I'm just a beginner in HTML and JS so my code is a bit incoherent and not very well indented. 

<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>
  • javascript
  • html
Share Improve this question asked Aug 2, 2016 at 18:25 vks2910vks2910 211 silver badge3 bronze badges 1
  • Duplicate of this one: stackoverflow./questions/14589193/… – Raydot Commented Aug 2, 2016 at 18:27
Add a ment  | 

2 Answers 2

Reset to default 6

Give your form an id and use the following script

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

Demo 

<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>

You did not set the ID to your form but were using it in the Javascript code :)

<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. You can also use <input type='reset'> to reset the form. More info here: https://developer.mozilla/en-US/docs/Web/HTML/Element/input

本文标签： htmlClear form after submission in JavaScriptStack Overflow

版权声明：本文标题：html - Clear form after submission in JavaScript - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744197895a2594826.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。