jQuery/Javascript function to clear all the fields of a form [duplicate]

Question

I am looking for a jQuery function that will clear all the fields of a form after having submitted the form.

I do not have any HTML code to show, I need something generic.

Can you help?

Thanks!

Volution

A very simple solution is to do the following, var originalForm = $("#myForm#).html(); At the time where you press Cancel button or Submit button, the last command should be $("#myForm").html(originalForm); This will reset all the fields to their original state as they were defined in the HTML ... – Deannedeans

<button type="reset">Reset</button> is a simple solution you might be looking for. – Conidiophore

Answer 1

Note: this answer is relevant to resetting form fields, not clearing fields - see update.

You can use JavaScript's native reset() method to reset the entire form to its default state.

Example provided by Ryan:

$('#myForm')[0].reset();

Note: This may not reset certain fields, such as type="hidden".

UPDATE

As noted by IlyaDoroshin the same thing can be accomplished using jQuery's trigger():

$('#myForm').trigger("reset");

UPDATE

If you need to do more than reset the form to its default state, you should review the answers to Resetting a multi-stage form with jQuery.

Swedish

More specifically: $('#myForm')[0].reset(); – Gainor

Reset doesn't clear a form, it simply sets the form values to their default which may or may not be "". Most of the other answers on this page are better. – Kristoferkristoffer

The problem I have is that this answer is a half truth and miss-leads some people who are truly seeking to "clear" (I was). With as of now 48 up votes there is evidence that people without the time and diligence to read the other answers, may leave this page with incomplete information. Your answer is not wrong it requires an update stating that its not going to clear, its going to reset. :) – Kristoferkristoffer

Another thing to take into account is that reset() doesn't work with input hidden fields – Land

I agree with @Kristoferkristoffer I believe OP is trying to clear the form after submitting it via ajax. What's the point of resetting the form after submitting it? It would be really helpful if you update your answer to state that it is not going to clear and perhaps also show how to clear a form. – Blaze

@Jason McCreary your response is non-nonsensical. The whole point is that we are supporting people who could be misled by this "top answer". There are better answers already such as Brian Hoover below. The best we can do is down vote this answer and up vote the better ones. I have already done this. – Kristoferkristoffer

why not $("#myForm").trigger("reset");? – Emancipated

@Jason McCreary, it's just jquery way, i think – Emancipated

This doesn't work on checkboxes/radioButtons?? – Vadavaden

$('#myForm').trigger("reset"); Does work on checkboxes/radiobuttons! but $('#myForm')[0].reset(); Doesn't – Vadavaden

Can this be achieved on divs as well? – Alcantar

Answer 2

To reset form (but not clear the form) just trigger reset event:

$('#form').trigger("reset");

To clear a form see other answers.

Emancipated

This does not work in combination with client side validation. If the validation failed the reset does not clear invalid fields but resets them to the last input value. – Pikeman

@Jürgen Bayer nobody says about validation, it just resets the form to init values To clear invalid data you need to write your own method like: $('#form input:invalid').val('') – Emancipated

@IlyaDoroshin: I was just saying that it does not work when using client side validation. Could be an helpful information for others. other solutions in this thread that use val('') work even with client side validation. – Pikeman

This is neat, but the answer is incomplete. Setting the inputs to a value of "" is not the same as "reset()". See my answer as an option. – Kristoferkristoffer

Answer 3

Something similar to $("#formId").reset() will not clear form items that have had their defaults set to something other than "". One way this can happen is a previous form submission: once a form has been submitted reset() would "reset" form values to those previously submitted which will likely not be "".

One option to clear all forms on the page, is to call a function such as the following, executing it simply as clearForms():

function clearForms()
{
    $(':input').not(':button, :submit, :reset, :hidden, :checkbox, :radio').val('');
    $(':checkbox, :radio').prop('checked', false);
}

If you want to reset a specific form, then modify the function as follows, and call it as clearForm($("#formId")):

function clearForm($form)
{
    $form.find(':input').not(':button, :submit, :reset, :hidden, :checkbox, :radio').val('');
    $form.find(':checkbox, :radio').prop('checked', false);
}

When I originally came to this page I needed a solution that takes into account form defaults being changed and is still able to clear all input items.

Note that this will not clear placeholder text.

Kristoferkristoffer

Your code is for me the best solution. I just add the container as parameter to the function and a class for elements we won't reset. Final function looks like this : function clearForm($form) { $form.find(':input').not(':button, :submit, :reset, :hidden, .not-reset').val(''); } – Lordly

@DayronGallardo Might also want to add $(container_element).find(':checkbox, :radio').prop('checked', false); – Pacha

@DayronGallardo also remember to add :checkbox, :radio to the .not (I have suggested these edits). – Pacha

You can just use the $('#myForm').trigger("reset"); method to refresh/reset checkboxes and etc...! – Vadavaden

James, you need to reread my post. – Kristoferkristoffer

I think this is the best. – Marry

@Kristoferkristoffer perfect solution, but how to stop form-select fields from clearing too? Rest all is perfect – Faithless

Answer 4

Set the val to ""

function clear_form_elements(ele) {

        $(ele).find(':input').each(function() {
            switch(this.type) {
                case 'password':
                case 'select-multiple':
                case 'select-one':
                case 'text':
                case 'textarea':
                    $(this).val('');
                    break;
                case 'checkbox':
                case 'radio':
                    this.checked = false;
            }
        });

    }

<input onclick="clear_form_elements(this.form)" type="button" value="Clear All" />  
<input onclick="clear_form_elements('#example_1')" type="button" value="Clear Section 1" />
<input onclick="clear_form_elements('#example_2')" type="button" value="Clear Section 2" />
<input onclick="clear_form_elements('#example_3')" type="button" value="Clear Section 3" />

You could also try something like this:

  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;

    });

  };

More info here and here

Holcomb

Add a $(this).change() at the end of the each-function to propagate the blank values to listeners. – Luxuriant

Method 1 is flawless and answers the question properly. Thanks for that – Roemer

@Roemer Almost flawless. Remember to add HTML5 input types to the first set of cases: case 'color': case 'date': case 'datetime': case 'datetime-local': case 'email': case 'month': case 'number': case 'range': case 'search': case 'tel': case 'time': case 'url': case 'week': – Pacha

Answer 5

    <form id="form" method="post" action="action.php">
      <input type="text" class="removeLater" name="name" /> Username<br/>
      <input type="text" class="removeLater" name="pass" /> Password<br/>
      <input type="text" class="removeLater" name="pass2" /> Password again<br/>
    </form>
    <script>
$(function(){
    $("form").submit(function(e){
         //do anything you want
         //& remove values
         $(".removeLater").val('');
    }

});
</script>

Hotchpot

Answer 6

You can simply use the reset button type.

<input type="text" />
<input type="reset" />

jsfiddle

Edit: Remember that, the reset button, reset the form for the original values, so, if the field has some value set on the field <input type="text" value="Name" /> after press reset the field will reset the value inserted by user and come back with the word "name" in this example.

Reference: http://api.jquery.com/reset-selector/

Doting

That resets the form. It does not clear it. if you set the value attribute on the textbox to value='hello' hitting reset all day will continue to display 'hello' – Rutherfurd

Yes, it's true. The reset button reset the form for the original values, I will update my answer. Thanks for the feedback. – Doting

Answer 7

I use following solution:

1) Setup Jquery Validation Plugin

2) Then:

$('your form's selector').resetForm();

Anglophile

Only if you have the jQuery Validation Plugin – Prosthodontics

Yeah. Thanks @JamesCushing. – Anglophile

Answer 8

function reset_form() {
 $('#ID_OF_FORM').each (function(){  
    this.reset();
 }); 
}

Stirpiculture

Answer 9

the trigger idea was smart, however I wanted to do it the jQuery way, so here is a small function which will allow you to keep chaining.

$.fn.resetForm = function() {
    return this.each(function(){
        this.reset();
    });
}

Then just call it something like this

$('#divwithformin form').resetForm();

or

$('form').resetForm();

and of course you can still use it in the chain

$('form.register').resetForm().find('input[type="submit"]').attr('disabled','disabled')

Dupe

How is this "more jQuery" than $('#form').trigger("reset");? – Osuna

Answer 10

Would something like work?

JQuery Clear Form on close

Carden

Answer 11

HTML

<form id="contactform"></form>

JavaScript

 var $contactform = $('#contactform')
    $($contactform).find("input[type=text] , textarea ").each(function(){
                $(this).val('');            
    });

Simple and short function to clear all fields

Casie