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="javascript: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 our link to click on to clear the form.
-We use Javascript's built-in onClick event handler.
-Inside the quotation marks we say:
---javascript: here comes some javascript
---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 out 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="javascript: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">
</form>

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

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

Click HERE to comment or discuss at iLoveTheCode GOOGLE Group

Previous Article: Annoy Users with onBlur in Javascript

Next Article: Javascript Referrer

New Perspectives on HTML and XHTML 5... Partrick Carey New $67.45	JavaScript David Flanagan New $31.49	HTML Gary B. Shelly, Th... New $84.55
CSS David McFarland New $23.09	CSS Mastery Andy Budd, Simon C... New $23.85	HTML & XHTML Chuck Musciano, Bi... New $29.99
Creating Web Sites Matthew MacDonald New $19.77	CSS Eric Meyer New $29.69	HTML, XHTML, and CSS, Sixth Edition ... Elizabeth Castro New $23.09

Privacy Information