Clear form using jQuery

Question

I'm using the code below to reset all of my values on a particular form.

        $('#' + frm).closest('form').find("input[type=text], textarea").val("");
        $('#' + frm).closest('form').find("input[type=password]").val("");
        $('#' + frm).find('input[type=checkbox]:checked').removeAttr('checked');
        $('#' + frm + ' input[type="radio"]').prop('checked', false);

It works fine for 95% of the cases but I would like to reset all of the Select box back to the selected index of 0. If there is a better or more efficient to do this entire process to reset all element types I'm open to the best suggestion. I need to reset the form because the same form will be used over and over again by the same person to add employment history.

Thanks for the input

`document.querySelector("form").reset()`? – epascarello Dec 29 '16 at 14:57 — epascarello, Dec 29 '16 at 14:57

score 1 · Answer 1 · answered Dec 29 '16 at 15:09

You can implement your own reset form method:

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.

score 1 · Accepted Answer · answered Dec 29 '16 at 15:09

1

You could use Form reset() Method

The reset() method resets the values of all elements in a form (same as clicking the Reset button).

 $('#' + frm).closest('form')[0].reset();

answered Dec 29 '16 at 15:09

Vladu Ionut

8,075
1
19
30

Is there something special that I must do when I create the select values in order for it to go back to 0. the reset code is working great for everything else but not the selected values – Bill Dec 29 '16 at 15:40
I have but it never gets reset to the either the default value or index 0 – Bill Dec 29 '16 at 16:18
take a look on this thread http://stackoverflow.com/questions/16913094/reset-select-value-to-default – Vladu Ionut Dec 29 '16 at 16:23
to keep the selected value after reset you have to handle that with JS code – Vladu Ionut Dec 29 '16 at 16:26

Clear form using jQuery

2 Answers2