Ujjwal's Blog: Clearing form data using jquery

Monday, January 24, 2011

Clearing form data using jquery

A question I often hear is, “How do I clear a form?”
Initially the answer seems very straightforward – a one-liner in jQuery:

$('form :input').val("");

But upon closer examination we find that this is a bad way to solve the problem. When someone says they want to “clear a form” what they really mean is that they want to clear the visible state from all the form fields. With this in mind, the code above is clearly not the right way to get the job done. First, it will blast away the values of hidden inputs, checkboxes and radio buttons. Not good. The values of those fields should not be altered. And second, it does not properly account for select elements. What we need is something smarter. Here’s a start:

$.fn.clearForm = function() {
  return this.each(function() {
    var type = this.type, tag = this.tagName.toLowerCase();
    if (tag == 'form')
      return $(':input',this).clearForm();
    if (type == 'text' || type == 'password' || tag == 'textarea')
      this.value = '';
    else if (type == 'checkbox' || type == 'radio')
      this.checked = false;
    else if (tag == 'select')
      this.selectedIndex = -1;
  });
};

Voila! Now we have a plugin for clearing form fields that can be called like this:

$(':input').clearForm()

or

$('form').clearForm()

Cheers,

Ujjwal Soni

1 comment:

Vipin Das said...: nice approach; January 24, 2011 at 8:12 PM