jQuery Function to All Clear Form Data

Pretty useful jQuery Function to clear all form data which I found on Karl Swedberg’s website. It simply removes all data from the form including text inputs, select boxes, radio buttons, checkboxes etc… There are two versions and the second version is probably more useful as you can apply it directly to the DOM element as a jQuery function.

function clearForm(form) {
  // iterate over all of the inputs for the form
  // element that was passed in
  $(':input', form).each(function() {
    var type = this.type;
    var tag = this.tagName.toLowerCase(); // normalize case
    // it's ok to reset the value attr of text inputs,
    // password inputs, and textareas
    if (type == 'text' || type == 'password' || tag == 'textarea')
      this.value = "";
    // checkboxes and radios need to have their checked state cleared
    // but should *not* have their 'value' changed
    else if (type == 'checkbox' || type == 'radio')
      this.checked = false;
    // select elements need to have their 'selectedIndex' property set to -1
    // (this works for both single and multiple select elements)
    else if (tag == 'select')
      this.selectedIndex = -1;
  });
};

Reset Input Button

You can put a hidden input of type reset and then trigger it to clear the form.

$('form > input[type=reset]').trigger('click'); //with a reset button in the form set to display: none;

jQuery Element Function

$.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;
  });
};
//usage
$('#flightsSearchForm').clearForm();

Source

Frequently Asked Questions (FAQs) about Clearing Form Data with jQuery

How can I reset a form using jQuery’s reset method?

The jQuery reset method is a simple and effective way to clear all form data. To use it, you need to select the form using jQuery selectors and then call the reset method. Here’s a simple example:

$('form')[0].reset();
In this example, ‘form’ is the selector that targets all form elements on the page. The [0] gets the first form (since form elements are in an array-like structure), and the reset() method clears all the form fields.

What does the jQuery empty method do?

The jQuery empty() method is used to remove all child nodes and content from the selected elements. It’s different from the reset method, which only clears the form fields but doesn’t remove them. Here’s how you can use the empty method:

$('#myForm').empty();
In this example, ‘#myForm’ is the id of the form you want to clear. The empty() method will remove all form fields and content within this form.

How can I clear all inputs, selects, and hidden fields in a form using jQuery?

You can use the jQuery val() method to clear all inputs, selects, and hidden fields in a form. Here’s an example:

$('form').find('input, select, textarea').val('');
In this example, the find() method is used to find all input, select, and textarea elements within the form, and the val(”) method sets their value to an empty string, effectively clearing them.

How can I clear form fields with jQuery?

You can clear form fields with jQuery using the val() method. Here’s an example:

$('#myForm').find('input:text, input:password, input:file, select, textarea').val('');
$('#myForm').find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected');
In this example, the find() method is used to find all text, password, file, select, and textarea fields within the form with id ‘myForm’, and the val(”) method sets their value to an empty string. The second line finds all radio and checkbox fields and removes their ‘checked’ and ‘selected’ attributes.

What is the difference between the jQuery reset method and the empty method?

The jQuery reset method and the empty method both clear form data, but they do it in different ways. The reset method clears the values of all form fields, returning them to their initial state. The empty method, on the other hand, removes all child nodes and content from the selected elements. This means that the empty method will remove form fields, not just clear their values.