CODEWITHSUNDEEP
javascripthtml
vks2910
vks2910

Reputation: 21

Clear form after submission in JavaScript

I see this has been asked multiple times but after trying all different combinations, 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>

Upvotes: 1

Views: 8170

Answers (2)

Rahul Desai
Rahul Desai

Reputation: 15481

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.org/en-US/docs/Web/HTML/Element/input

Upvotes: 0

bhansa
bhansa

Reputation: 7504

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>

Upvotes: 6

Related Questions