Weird Thoughts From Eric's Head

Tags - Categories : All | AJAX | BUSINESS | PERSONAL | PROGRAMMING | BOOK REVIEW

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


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.
You can use the index of the form instead. If it is the first form then use 0.

Eric
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.
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
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


Add a comment

Title
Body
HTML : b, i, blockquote, br, p, pre, a href="", ul, ol, li
Math Quiz 8 + 7 = (Helps stop blog spam)
Name
E-mail address
Website
Remember me Yes  No 

E-mail addresses are not publicly displayed, so please only leave your e-mail address if you would like to be notified when new comments are added to this blog entry (you can opt-out later).

TrackBack to http://radio.javaranch.com/pascarello/addTrackBack.action?entry=1117043999998