Tuesday, June 8, 2010

How to reset the form using Javascript or clear the contents in a form element

How to reset the form using Javascript or Clear the contents entered into a form elements using Javascript

function clearForm(oForm) {
  
  var elements = oForm.elements;
  
  oForm.reset();

  for(i=0; i<elements.length; i++) {
    
  field_type = elements[i].type.toLowerCase();

  switch(field_type) {

    case "text":
    case "password":
    case "textarea":
          case "hidden": 
    
      elements[i].value = "";
      break;
      
    case "radio":
    case "checkbox":
        if (elements[i].checked) {
          elements[i].checked = false;
      }
      break;

    case "select-one":
    case "select-multi":
                elements[i].selectedIndex = -1;
      break;

    default:
      break;
  }
    }
}

The above function clears all the contents of a form elements. This Javascript function can  be used in onClick event for a button. See the example below to use it:

<form name='form1' action='' method='post'>
Username : <input type='text' name='uname'>
<br>
First name : <input type='text' name='fname'>
Last name : <input type='text' name='lname'>
<input type='submit' value='Submit'> &nbsp;&nbsp;<input type='button' value='Reset' onClick='clearForm(form1)'> 
 </form>

(or) 

Simply we can use the javascript element given below.

document.formname.reset()

which resets the form elements in the FORM
//Amazon Associates
6.1, and MicroSD Slot--International Version No Warranty (Black)HTC

No comments: