Clear form with JavaScript

JavaScript is the only option, if you want to have the ability to clear all form fields. Yes, HTML form has Reset method, but if the form has initial values, then Reset will return the form to the initial state instead of clear input fields. This example also shows how to create an access loop for each form element. You can uncomment alert before "switch" line and you will see the message before element value is cleared. Drop down select-one will be set to its first option because it can not be treated like input text field or select-multiple.

Text			On the left is a simple form to show how this script works. Button Clear will clear form while button Reset will back form to the initial state. You can also change form values before test. Please try!
Textarea	This is a text area
Password
Radio
Checkbox
Select-one	... one two three four
Select-multiple	one two three four

And the JavaScript source:

// function will clear input elements on each form
function clearForms(){
  // declare element type
  var type = null;
  // loop through forms on HTML page
  for (var x=0; x<document.forms.length; x++){
    // loop through each element on form
    for (var y=0; y<document.forms[x].elements.length; y++){
      // define element type
      type = document.forms[x].elements[y].type
      // alert before erasing form element
      //alert('form='+x+' element='+y+' type='+type);
      // switch on element type
      switch(type){
        case "text":
        case "textarea":
        case "password":
        //case "hidden":
          document.forms[x].elements[y].value = "";
          break;
        case "radio":
        case "checkbox":
          document.forms[x].elements[y].checked = "";
          break;
        case "select-one":
          document.forms[x].elements[y].options[0].selected = true;
          break;
        case "select-multiple":
          for (z=0; z<document.forms[x].elements[y].options.length; z++){
            document.forms[x].elements[y].options[z].selected = false;
          }
        break;
      }
    }
  }
}

As script goes through all form elements on the HTML page, it will not clear only this test form, but Search field and the Message box also. So if you want to leave a comment, do not test the Clear button before you click on submit. On the other hand, if you want to clear only group of input elements closed within DIV or some other HTML tag, you will have to modify clearForms() function and it can look like:

function clearElements(el){
	var object = new Array();
	object[0] = document.getElementById(el).getElementsByTagName('input');
	object[1] = document.getElementById(el).getElementsByTagName('textarea');
	object[2] = document.getElementById(el).getElementsByTagName('select');
  var type = null;
  for (var x=0; x<object.length; x++){
    for (var y=0; y<object[x].length; y++){
      type = object[x][y].type
      switch(type){
        case "text":
        case "textarea":
        case "password":
          object[x][y].value = "";
          break;
        case "radio":
        case "checkbox":
          object[x][y].checked = "";
          break;
        case "select-one":
          object[x][y].options[0].selected = true;
          break;
        case "select-multiple":
          for (z=0; z<object[x][y].options.length; z++){
            object[x][y].options[z].selected = false;
          }
        break;
      }
    }
  }
}

I cut out comments because functions are very similar. You will have to assign ID to the parent element which contains input elements. To clear input elements, function call should look clearElements('myForm').

Related posts

• Adding table rows & columns in JavaScript
• Drawing with JavaScript
• JavaScript Drag and Drop example 4
• JavaScript Drag and Drop example 3
• JavaScript Drag and Drop example 2

This entry was posted on Friday, 26.12.2008. at 23:20and is filed under JavaScript. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.