Reset a form with Jquery

Question

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.

you can clear a form this way too -- $('form').find("input[type=text], textarea").val(""); -- providing you add the input types separated by comas. jsfiddle.net/pxqhb5k6 — Tasos
– Tasos, Commented May 15, 2016 at 20:10

Community · Accepted Answer · 2017-04-13 12:32:14Z

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).

Thanks! Now it's working fine. I don't know that .reset() is not a jQuery method. Yes, I know that a reset button it's not very user friendly, but I'm doing a form with an AJAX message on success, so if the transaction with the database was successful, the page resets the form and displays an AJAX Bootstrap success-alert, so you can dismiss the alert or return to the previous page or you can fill again the form (in this case to add an sports event to database). Thanks for the link to the ux info!
@EliasGarciaMariño My bad, on closer inspection you aren't implementing a close button feature, but a callback that resets a form :) that should please the UI/UX gurus hehe.

marc_s · Accepted Answer · 2021-04-19 15:37:44Z

Updated answer for latest versions of jQuery (2021).

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

or simply only JS

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

Bud Damyanov · Accepted Answer · 2016-09-01 07:49:29Z

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.

Collectives™ on Stack Overflow

Reset a form with Jquery

3 Answers 3

2 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Related