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.

DEMO of form Reset
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>

JavaScript Validation Validation of dropdown Listbox

Subscribe to our YouTube Channel here

	29-05-2021
Thanks you for sharing.

JavaScript reset of a form

Uses of Reset in comment posting.