jQuery Function to All Clear Form Data

This article introduces several practical ways to use jQuery to clear form data from Karl Swedberg's website. These methods can clear all data in the form, including text input boxes, drop-down lists, radio buttons, check boxes, etc.

Method 1: General function

The following function iterates through all input elements in the form and clears its data according to the element type:

function clearForm(form) {
  $(':input', form).each(function() {
    var type = this.type;
    var tag = this.tagName.toLowerCase();
    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;
  });
};

Method 2: Reset button

You can add a hidden reset button and then trigger it to clear the form:

$('form > input[type=reset]').trigger('click'); // 假设表单中有一个设置为 display: none; 的重置按钮

Method 3: jQuery element function

This method is more convenient and can be applied directly to DOM elements as a jQuery 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;
  });
};
// 使用方法
$('#flightsSearchForm').clearForm();

FAQ (FAQ)

• How to reset a form using jQuery's reset method?

  jQuery's reset() method is a simple and efficient way to clear all form data. Just select the form and call the reset() method. For example: $('form')[0].reset(); This will reset the first form on the page.

• What is the function of jQuery's empty() method?

  The

  empty() method removes all children and contents of the selected element. This is different from the reset() method, which clears form fields only and does not remove them. For example: reset() This will remove all fields and contents in the form $('#myForm').empty();. myForm

• How to use jQuery to clear all inputs, selections, and hidden fields in a form?

  You can use the

  method of jQuery to clear all inputs, selections, and hidden fields in the form. For example: val() This will clear the values ​​of all inputs, selections, and text areas in the form. $('form').find('input, select, textarea').val('');

• How to clear form fields using jQuery?

  The

  can be used to select precisely the fields to be cleared using the val() method and selector. For example: $('#myForm').find('input:text, input:password, input:file, select, textarea').val(''); $('#myForm').find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected'); This will clear the text, password, file, selection, and text area fields respectively, and uncheck the radio buttons and check boxes.

• What is the difference between the reset() method of jQuery and the empty() method?

  The

  reset() method clears the values ​​of all form fields and restores them to their initial state. The empty() method removes all children and contents of the selected element, which means the empty() method removes form fields, not just clears their values.

Which method to choose depends on your specific needs and preferences. Method 3 provides a more concise jQuery plug-in method for easy reuse. Remember to adjust the selector according to your form ID.

The above is the detailed content of jQuery Function to All Clear Form Data. For more information, please follow other related articles on the PHP Chinese website!