How to reset a form in jQuery

WireframeWhen designing desktop apps, websites, and mobile applications, more than once I have tried using an application like mockingbird or Pencil Project. On one hand, mockingbird, is a web application that can be accessed from any browser and allows you to design multiple pages with different elements. On the other hand, Pencil Project, initially born as a Firefox extension, now has a multiplatform desktop application that allows you to mockup easily.

The drawback I see on these two applications is that for some reason, I always end up making simple mockups with a simple pen and paper. This way I can organize my ideas faster than using these applications. I guess the main reason for this is that I’m not a designer, so to me it is the same doing a shitty design in paper, than a shitty design with an application. Moreover, usually using a computer app for this task I end up spending more time to do the same…

Anyway, the other day I discovered, and the truth is that I was quite impressed by the UI. It is super-easy and fast to use. You just drag the mouse while clicking and voila, you have an item of the size of your selection. You click on the type of item you want and you are done with the item. Even if you want to change attributes, you just have to double click on it, and select the attributes you want to change.

Actually, it is the first time I feel that I do not waste my time doing mockups with an application of this kind. From what I’ve seen, this application is starting, and it still lacks of some functionalities and needs some polishment, but I suppose that those will be added in the future. Even I think this lack of complexity and lack of tons of box types is what makes you go faster.

I think choosing the right tool for a job is a matter of personal preferences and personal needs, but I would recommend trying and taking a look at the other apps I pointed out at the beginning of the post.

Feel free to share any other tool you find useful in the comments 😉

Trackback URL

, , , ,

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


    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:

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

    Thanks Pau, it works 😉

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


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

    Simpler method:





    Or, if you just need a JS version:

  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


  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


    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(){

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

    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:

  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.

  13. ankasala
    15/06/2015 at 3:24 am Permalink

    can any one help me in setting the reset button and coding for that in jquery and when i click the reset button all the history of product should be clear? thanks in advance


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