Clear form fields with jQuery

javascript

form-engineering

javascript-methods

form-reset

byNikita Barsukov·Feb 2, 2025

This snippet allows you to clear all text fields in a form by triggering the click event on a reset button. It finds the nearest form and targets its input and textarea fields to set their values to an empty string:

$('#resetBtn').click(function() {
  // Even the smallest input makes a difference!
  // Trust me, I'm a function.
  $(this).closest('form').find('input[type="text"], textarea').val('');
});

By clicking the #resetBtn, every input field and textarea in the target form is wiped clean, ready to accept new user inputs!

Special cases - checkboxes and selects

Forms can feature various elements such as checkboxes and select boxes. As these have different types of user inputs, they're cleared differently:

Checkboxes can be unchecked using the jQuery .prop() method:

$('input[type="radio"], input[type="checkbox"]').prop('checked', false);
// Who unchecked my awesome comments?

For select boxes, use .prop('selected', false) to clear the value:

$('select').prop('selectedIndex', 0);
// Back to square one, folks!

Native form reset

And if you feel like going native, HTML forms can be reset to their server-loaded values:

document.getElementById('myform').reset();
// It's like turning off and on again, but for forms.

This code snippet calls the native HTML reset method, which intuitively takes care of every field type in your form.

Visualising the process

Imagine your form input fields as an artist's canvas 🎨. The user's inputs are different colors and strokes painting a unique picture (perhaps slightly abstract!).

Before clearing: 🎨🖌️ [👤 Bob, 📧 [email protected], 📝 Hey there!]

But now, let's bring out the big guns, the .val('') method:

$('#myform :input').not(':button, :submit, :reset, :hidden').val('');

Voila! Our canvas is back to being a fresh start:

After clearing: 🎨🧹[     ,    ,    ]

Resetting complex, multi-step forms

How about handling the big boys? We are talking multiple-page, complex forms with various field types. Prepare to be enlightened:

Targeting form sections

In multi-step forms, you may only want to reset the current section. You can achieve this with a combination of the closest and find methods:

$('.reset-step').click(function() {
  $(this).closest('.form-step').find('input[type="text"], textarea').val('');
  // Who needs previous entries, right?
});

Targeting specific types of fields

Clear only certain types of fields within a large form. Combine your selectors!

$('#complexFormReset').click(function() {
  $(this).closest('form').find('input[type="email"], input[type="date"], textarea').val('');
  // Keep the password, lose the rest!
});