Resetting Forms with JavaScript
Well we all know that the reset button on a form resets the fields of a form back to what their states initially were set to. We can also cause the same effect by performing the following statement:
document.formName.reset();Now that is fine and dandy if you want the forms to go back to orginal state, but what if you want everything wiped clean? Well you can loop through the form array and detect the type of the element. If it is a text based element, we reset the value. A checkbox/radio button selections get set to false. And a select element's selected Index is set to -1.
<script type="text/javascript">
function ResetForm(xFormName){
var arrElems = document.forms[xFormName].elements;
document.forms[xFormName].reset();
for(xi=0;xi<arrElems.length;xi++){
if(arrElems[xi].type.toLowerCase() == "text" ||
arrElems[xi].type.toLowerCase() == "hidden" ||
arrElems[xi].type.toLowerCase() == "password" ||
arrElems[xi].type.toLowerCase() == "textarea")
arrElems[xi].value="";
else if(arrElems[xi].type.toLowerCase() == "radio" ||
arrElems[xi].type.toLowerCase() == "checkbox")
arrElems[xi].selected = false;
else if(arrElems[xi].type.toLowerCase().indexOf("select") != -1)
arrElems[xi].selectedIndex = -1;
}
}
</script>
I probably could have used a switch statment to speed up the processing of the loop, but you would only notice the time difference if we were talking 1000's of elements. Sorry that the format is rather ugly, but I did not want to mess up everyone's RSS readers with long strings like normal!
Hope that helps!
Eric Pascarello
Moderator of HTML/JavaScript at www.JavaRanch.com
Author of: JavaScript: Your Visual Blueprint for Dynamic Web Pages
TrackBacks[0]
Comments[5]
Posted by pascarello on May 25, 2005 12:59:59 PM EST
Reply |
Permalink
Re: Resetting Forms with JavaScript
This script doesn't work in IE when you have two forms on the page with the same name. I know, it's not normal to name two forms the same, it happens automagically when you use the struts framework from Java.
Comment from Anonymous on July 12, 2005 10:23:36 PM EST
You can use the index of the form instead.
If it is the first form then use 0.
Eric
Eric
Comment from Eric Pascarello on July 13, 2005 9:28:32 AM EST
With both of the aforementioned comments in mind, here's another way to write the function. Instead of passing ResetForm() the name of the form, pass it a reference to the actual form:
function ResetForm(objForm){
var arrElems = objForm.elements; objForm.reset();
for(xi=0;xi < arrElems.length;xi++){
formFieldType = arrElems[xi].type.toLowerCase();
switch(formFieldType) {
case "text": case "hidden": case "password": case "textarea":
arrElems[xi].value=""; break;
case "radio": case "checkbox":
arrElems[xi].selected = false; break;
default:
if(formFieldType.indexOf("select") != -1)
arrElems[xi].selectedIndex = -1;
}
}
}
Once declared, you could call like function like so, based on your needs:ResetForm(document.uniqueFormName); // For uniquely-named forms. ResetForm(document.forms[2]); // For a form whose name is not unique.As you've probably noticed, I rewrote the function using a switch() statement. It's slightly less compatible (Javascript 1.2+), but it's a personal preference. My apologize if the code doesn't work right away -- I didn't try running it myself.
Comment from Tek Boy on July 16, 2005 3:47:27 PM EST
I mentioned that a switch would be better. Small forms would see only a few seconds of improvement, but larger ones would see a large improvement. I am sure your code will help someone!
Eric
Eric
Comment from Eric Pascarello on July 18, 2005 9:29:28 PM EST
Hi,
The reset method does not reset drop downs and list boxes to their original value. It does that for text fields.
Any suggestions would be most welcome
Thank you in advance
Comment from neena on December 13, 2005 4:08:21 AM EST
TrackBack to http://radio.javaranch.com/pascarello/addTrackBack.action?entry=1117043999998