How to reset a form in jQuery

Reseting the form to it’s initial values is one of those things you often do once and once again.

Doing this task with jQuery is really easy:

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

The thing is, that the code above iterates through each element of the form, and calls to the DOM “reset” javascript method. In fact, the “reset” function does not exist in jQuery.

It would be much more simple to do something like $(“#FormID”).reset(). Fortunately creating that function in jQuery only will take a minute of programming:

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

Using the code above, reseting a form would be just one call (as desired):

$("#FormID").reset();

May be using the name “reset” is too generic to be applied to any object (it will only work on forms), but I think it has a lot of sense to name it ‘reset’. But anyway, feel free to call it “resetForm” if you feel more comfortable.

Interesting links:

Trackback URL

, , , ,

13 Comments on "How to reset a form in jQuery"

  1. Ralph Moran
    23/07/2009 at 8:33 pm Permalink

    Saludos,

    Muy buen tip!

    Seria bueno mejorarlo para que solo funcion para forms o elementos DOM que acepten reset.

    Suerte, hasta luego.

  2. Ben
    01/04/2010 at 7:38 am Permalink

    A better reset function would be:

    jquery.fn.reset = function(fn) {
    return fn ? this.bind("reset", fn) : this.trigger("reset");
    };

    This would allow you to attach a reset function using:
    $("#FormID").reset(function(){ /* do something */ })

    In the same way as you would attach a submit function:
    $("#FormID").submit(function(){ /* do something */ })

    in addition to being able to trigger a reset by calling:
    $("#FormID").reset()

  3. Budi
    06/09/2011 at 8:13 pm Permalink

    Thanks Pau, it works ;)

  4. kevin
    15/10/2011 at 5:44 am Permalink

    $(‘#myform’).get(0).reset();

  5. Jake Bellacera
    08/05/2012 at 10:14 am Permalink

    Simpler method:

    HTML:

     

    jQuery:

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

    Or, if you just need a JS version:

    document.getElementById('myForm').reset();
  6. Pau Sanchez
    15/05/2012 at 10:42 pm Permalink

    @Jake I really like the simplicity of your method ;)

  7. kdniazi
    25/06/2012 at 11:14 am Permalink

    using jquery to reset the form by id

    $(‘#myForm’).get(0).reset();

  8. Chris
    10/10/2012 at 3:00 am Permalink

    Using the native JS reset function doesnt work in FireFox or mozilla type browsers though it works in IE hence i guess a manual function to reset each field would be appropriate. Thanx for the info though :-)

  9. Uma Mahesh Varma
    10/01/2013 at 11:27 pm Permalink

    Hi,

    I am trying to get the id of the element of each element in the form. But the below is not getting each element id. Can I know why ??

    $(‘#sample_form’).each (function(){
    this.reset();
    });

    jQuery.fn.reset = function () {
    $(this).each (function() {
    this.reset();
    alert(this.id);
    });
    }

    Thank You,
    Uma Mahesh

  10. Robin
    27/01/2013 at 7:13 pm Permalink

    Wow. The .each() method is kinda overkill if you’re just targeting one element.
    I’ve wrote a small blog post about the topic myself including examples of the most common pitfalls when trying to reset a jQuery form and the shortest code possible to reset a form. It can be found here:

    http://forwebonly.com/how-to-reset-an-html-form-with-jquery/

  11. helan
    26/02/2013 at 6:45 pm Permalink

    @Uma:this = form object,not object in form

  12. David
    18/03/2013 at 5:43 pm Permalink

    I have two forms on my site. The first form contains a single drop down with two options. The 2nd form contains two drop down fields. Any time the first form changes I want the second form to reset. I know this sounds strange but its for a hack. So I need a change function and clear from function. Lets say that a user selects option 1 from the first form then selects an option in each of the fields in form 2, the user then decides to select option 2 from the first form. The second form needs to reset.

Trackbacks

  1. [...] Resetear un formulario con jQuery [...]

Hi Stranger, leave a comment:

ALLOWED XHTML TAGS:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Subscribe to Comments