Clear a form with jQuery - Electric Toolbox https://www.electrictoolbox.

com/jquery-clear-form/

Search:

Clear a form with jQuery

Posted in Javascript - Last updated Feb. 23, 2011

A few weeks ago I posted how to clear a form with

Javascript and in this post look at how to do the same
thing but using jQuery, which makes the code required
to do it much more condensed.

Please note that an HTML form can be reset using a reset

button which resets the form back to its original state,
whereas this post clears all the �elds in the form to an Categories
empty state. To reset a form to its default values refer to Apache
my "resetting an HTML form with a reset input button" or Applications
"reset an HTML form with Javascript" posts. Email Servers
FCKEditor
HTML and CSS
Example Javascript
Linux/Unix/BSD
Here's an example to show what I'm talking about. If Microsoft SQL Server
you modify any of the �elds and then click "Reset" the Miscellaneous Postings
form will reset back to its original state. Clicking "Clear MySql
Networking
All" will clear all the �elds. Clicking "Clear Section X" will
Nginx Web Server
clear only that section in the form. I've used �eldsets OSX
and legends to mark the sections but they just as easily PHP
be divs or tables etc. Quick Tips
SilverStripe
VMWare
Windows

Section 1

this is the default text

••••••••
this is the default
textarea

1 of 5 27/11/2019 11:14
Clear a form with jQuery - Electric Toolbox https://www.electrictoolbox.com/jquery-clear-form/

Section 2

Section 3

bananas

apples Core™ i7
bananas
Frete grátis
pears
Compre agora

Reset Clear All Clear Section 1

Recent Posts
Clear Section 2 Clear Section 3 Showing seconds with ls on Linux and
OSX
Show only one process with top on
The jQuery
Linux
Change the commit message with git
function clear_form_elements(ele) { Possible responses from Sendy's
subscribe API call
$(ele).find(':input').each(function() { Where did "Save for Web" go in Adobe
Photoshop?
switch(this.type) {
View the message header and body
case 'password':
for an email in the exim mail queue
case 'select-multiple':
RamNode cheap virtual servers
case 'select-one':
case 'text':
case 'textarea':
$(this).val('');
break;
case 'checkbox':
case 'radio':
this.checked = false;
}
});
Ofertas no Clube de Be
} Recompensa em dobro
2 meses. Mais que Black
Banco do Brasil
The buttons

<input onclick="clear_form_elements(this.form)" type="butto

<input onclick="clear_form_elements('#example_1')" type="bu
<input onclick="clear_form_elements('#example_2')" type="bu
<input onclick="clear_form_elements('#example_3')" type="bu

Note that you can can either pass in a reference to an

element (e.g. this.form in the above) or the #id of the
set of elements to apply the reset to.

Comments are closed

2 of 5 27/11/2019 11:14
Clear a form with jQuery - Electric Toolbox https://www.electrictoolbox.com/jquery-clear-form/

Please note that I have closed comments on this post

because too many people seem unable to understand
the purpose of this post and continue to post
comments showing how to reset a form. This post
shows how to clear a form, which as explained at the
top of this post, is not the same as resetting a form to
its default values.

If you want to reset a form refer to my other posts as

linked to in the related posts below.

Related posts:
Reset an HTML form with Javascript
Resetting an HTML form with a reset input button
Clear a form with Javascript
Clear upload �le input �eld with jQuery
Clearing the default value of text input with
Javascript

Comments

3 of 5 27/11/2019 11:14
Clear a form with jQuery - Electric Toolbox https://www.electrictoolbox.com/jquery-clear-form/

Comments for this thread are now closed ×

Comments Community  Avatar

 Recommend 23 t Tweet f Share

Sort by Oldest

David • 10 years ago

very nice solution, I've been surfing all day for this.
1△ ▽ • Share ›

desperate8 • 10 years ago

hi, can anyone help me out? I wonder why my
dropdown values are not cleared. But all the other
inputs can be cleared except that dropdown. Any
idea???
3△ ▽ • Share ›

Chris Hope Mod > desperate8 • 10 years ago

When the value is cleared in a select, the first
option becomes selected - this is the nature of
a select box. If you have a blank first option
(like my example in this post does) then it will
appear "cleared".
5△ ▽ • Share ›

desperate8 > Chris Hope

• 10 years ago
Hi Chris, i can see your logic..but as for
my form, its not displaying the first
value..instead its still calling the
previous value it was assigned to. y?
1△ ▽ • Share ›

Chris Hope Mod >

desperate8 • 10 years ago
Bit hard to know without see
your form and Javascript.
3△ ▽ • Share ›

desperate8 > desperate8

• 10 years ago
<tr class="form_table_odd">
<td width="20%"
class="listing_subtitle">
<s:message
code="product.addProductForm.category"/>
:*</td>
<td width="80%">
<select
name="productCategoryCode"

4 of 5 27/11/2019 11:14
Clear a form with jQuery - Electric Toolbox https://www.electrictoolbox.com/jquery-clear-form/

Contact - Copyright Info - Privacy Policy

5 of 5 27/11/2019 11:14