Javascript Reset Form

reset();

-Use Javascript's built-in reset object.

The simplest way to use reset would be like this:

<form name=fori>
<input type=text name=textfi>
</form>

<a href="#" onClick="document.fori.reset();return false">Clear It!</a>

-First we created a simple form named fori because we like the name fori.
-Then we create a link to click on to clear the form.
-We use Javascript's built-in onClick event handler.
-Inside the quotation marks we say:
---document the page we are on
---fori the name we gave our form
---reset() Javascript's built-in reset() does the work

Fairly straight forward. But I am always scared of reset buttons or links because if you have ever filled in a really long form and clicked the wrong button, it can be quite upsetting.

So let's build a better mousetrap.

function betterMo() {
if (confirm("Are you sure you want to clear form?")) {
document.fori.reset();
}
}

<a href="#" onClick="betterMo();return false">Clear It!</a>

This time we created a function to make sure our user wants to clear the form.

-We used Javascript's built-in confirm method.
-We enclosed our question in quotation marks.
-We put our same document.fori.reset() code in the if condtion.
---document the page we are on
---fori the name we gave our form
---reset() Javascript's built-in reset() does the work

Synopsis: In other words, if the user clicks OK or YES, the form will be reset. Otherwise, the form will be unchanged.


The code below has three ways to clear the form. The submit button (which will confirm), a confirm link, and an immediately clear link.

Have fun resetting that form!


Free Copy and Paste Javascript Code:

<script type="text/javascript">
<!--
function betterMo() {
if (confirm("Are you sure you want to clear form?")) {
document.fori.reset();
}
}
-->
</script>

<form name=fori>
<input type=text name=textfi>
<input type=checkbox name=checki>
<input type=radio name=radi>
<textarea name=textai></textarea>
<input type=submit onClick="betterMo();return false" value="Clear It! With Confirm...">
</form>

<a href="#" onClick="document.fori.reset();return false">Clear It NOW!</a>
<a href="#" onClick="betterMo();return false">Clear It After Confirming</a>

Resources:
onClick Javascript
Javascript Function
Call a Function in Javascript
If Else Javascript
Javascript Alert

Previous Article: Annoy Users with onBlur in Javascript

Next Article: Javascript Referrer