Clear Form Elements

Every Form Element Object <INPUT TYPE="..."> has a type Property that identifies what type of element it is. The type Property allows us to loop through the elements[] Array and operate on the Form Objects it contains in ways that depends on their respective "type".

function ClearForm(form) {
var i, j;

     // go through the entire Form Object
     for (i = 0; i < form.length; i++) {
          alert('form.elements[' + i + '] \n\n' + '<INPUT TYPE="' + form.elements[i].type + '">');

          // if the element isn't a button, hidden, submit, or reset then set the VALUE to ""
          if (form.elements[i].type != 'button' && form.elements[i].type != 'hidden' &&
               form.elements[i].type != 'submit' && form.elements[i].type != 'reset')
               form.elements[i].value = "";

          // if the element is a radio button or a checkbox then uncheck the Object if it is checked
          if (form.elements[i].type == 'radio' || form.elements[i].type == 'checkbox')
               form.elements[i].checked = false;

          // if the element is a select Object then assign it new text values
          if (form.elements[i].type == 'select-one' || form.elements[i].type == 'select-multiple') {
               for (j = 0; j < form.elements[i].length; j++) {
                    form.elements[i].options[j].text = " Item 1" + j + " ";
               }

               form.elements[i].options[0].selected = true;
         }
     }
}

</SCRIPT>

<FORM>
     <INPUT TYPE="hidden">
     <INPUT TYPE="radio" NAME="rdoBtn" CHECKED>
     <INPUT TYPE="radio" NAME="rdoBtn">
     <INPUT TYPE="checkbox" NAME="chkBox" VALUE="ON" CHECKED>
     <INPUT TYPE="checkbox" NAME="chkBox" VALUE="ON">
     <INPUT TYPE="password" NAME="pwd" VALUE="password">
     <INPUT TYPE="text" VALUE="25">
     <TEXTAREA>Let's see what happens</TEXTAREA>
     <SELECT NAME="selMenu">
          <OPTION>Item 1</OPTION>
          <OPTION>Item 2</OPTION>
          <OPTION>Item 3</OPTION>
          <OPTION>Item 4</OPTION>
          <OPTION>Item 5</OPTION>
     </SELECT>
     <SELECT NAME="selMenu1" SIZE="3" MULTIPLE>
          <OPTION>Item 1</OPTION>
          <OPTION>Item 2</OPTION>
          <OPTION>Item 3</OPTION>
          <OPTION>Item 4</OPTION>
          <OPTION>Item 5</OPTION>
     </SELECT>
     <INPUT TYPE="submit" VALUE="Submit">
     <INPUT TYPE="reset" VALUE="Reset">
     <INPUT TYPE="button" VALUE="test" onClick="ClearForm(this.form);">
</FORM>

Using type