CODEWITHSUNDEEP
jqueryformsreset
Elias Garcia
Elias Garcia

Reputation: 7282

Reset a form with Jquery

I'm trying to reset a form with Jquery in a web application I'am developing with Java and Tapestry. The problem is that Tapestry doesn't provide any kind of method to reset a form, so I need to create a JS module for it.

I have about 4-5 forms in my application with different id's, so I tried this:

define(["jquery"], function($) {

    return function() {
        $("form").on("submit", function() {
            if (!$("form-group").hasClass("has-errors") && !$("div").hasClass("alert")){
                $("form").reset();
            }
        });
    }

})

This is my first time with JQuery, so it doesn't works. What I'm trying to do is set a callback when the submit button of the form gets hitted. This is my button declaration inside the form:

<div class="col-md-offset-5 col-md-3"><button class="btn btn-block btn-primary" type="submit"><span class="glyphicon glyphicon-plus"></span> Add

I have only one form on each page. I think this is quite simple, but i can't get it to work. Anyone can give me some help with this? Thanks.

Upvotes: 1

Views: 24000

Answers (3)

Isuru Dilshan
Isuru Dilshan

Reputation: 829

Updated answer for latest versions of jQuery (2021).

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

or simply only JS

document.getElementById("myForm").reset();

Upvotes: 2

Bud Damyanov
Bud Damyanov

Reputation: 31899

The reset function (still) does not exist in jQuery. However there are couple of way you can achieve form resetting. The code below, for example, loops through every element of the form and calls the DOM reset JavaScript method.

jQuery('#form').each(function(){
  this.reset();
});

A more simpler way would be to do something like:

  jQuery("#form").reset();

In this case you should implement your own reset method like this:

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

Another way to implement your own reset form method is:

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

This would allow you to attach a code to a reset function:

 jQuery("#form").reset(function(){ 
   /* some other code */ 
 });

You can (and still this is recommended way to do the things) use a simple HTML input of type reset - it will do the same even on browsers who have JavaScript disabled.

Upvotes: 0

Terry
Terry

Reputation: 66218

The .reset() method is not a jQuery method, and that's why it wouldn't work with a jQuery object. You can, however, refer to the DOM node in the jQuery object and then use the native JS method on it, i.e.: $("form")[0].reset();.

define(["jquery"], function($) {

    return function() {
        $("form").on("submit", function() {
            if (!$("form-group").hasClass("has-errors") && !$("div").hasClass("alert")){
                $("form")[0].reset();
            }
        });
    }

})

However, I generally consider a form reset button unnecessary and in fact, detrimental to user experience. For majority (I'd say 99.9%) of use cases, when a user starts typing in a form they do not have the intention of completely erasing their data, and so the reset button, when clicked on by mistake (especially if the action is not made clear through UI design), will erase the user's input much to their frustration (and with no "undo" recourse).

Upvotes: 7

Related Questions