JavaScript reset of a form

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>


plus2net.com




Post your comments , suggestion , error , requirements etc here .




We use cookies to improve your browsing experience. . Learn more
HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
©2000-2020 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer