Resetting a form by using JavaScript or DHTML

We can reset a form to default input values by using Reset button. But on several occasion we need to reset the form by using JavaScript ( or DHTML ) where based on some condition we can reset the form. To do this we will be assigning one ID to the form. By using that ID we can reset the form. Here is the simple syntax to reset a form by JavaScript.

document.getElementById("f1").reset();

Here f1 is the form ID.

Uses of Reset in comment posting.

In this page and in other pages also we are using a form asking visitors to post their comments. If the form validation is not cleared then you will get a message asking you to take corrective measures to validate the form. If the validation is passed then the data is stored in the database and the form needs to be reset. This is achieved by using DHTML where if validation is passed then the form is reset through JavaScript. Here is the script.


<html>
<head>
<title>Demo of form reset in Javascript DHTML</title>
<link rel="stylesheet" href="../images/all11.css" type="text/css">
<script language='JavaScript' type='text/JavaScript'>
<!--
function reset_form(){
document.getElementById("f1").reset();
}
//-->
</script>

</head>
<body>
<form id=f1 method=post action=''>
Name: <input type=text name=n1><br>
Sex:<input type=radio name=sex value='female'>Female 
<input type=radio name=sex value='male' checked>Male <br>
Language:<select name=s1 value=''>
<option value=''>Select One</option>
<option value=php>PHP</option>
<option value=asp>ASP</option>
<option value=java>Java</option>
<option value=javascript>JavaScript</option>
</select><br>
<input type=submit name=Submit> <input type=reset value=Reset>
</form>
<br><br>
<input type=button value='Reset Form' onClick="reset_form()";>

</body>
</html>

Subscribe to our YouTube Channel here

JavaScript reset of a form

Uses of Reset in comment posting.

Subscribe