How to reset a form programmatically?

Question

I want to reset a form in a JQuery click event function. How to do that ?

score 14 · Accepted Answer · edited May 23 '17 at 12:08

14

At it's simplest: $("form-selector-here")[0].reset() but also see: Resetting a multi-stage form with jQuery

Note that jQuery isn't necessary for this at all, as $(selector)[0] obtains the original DOM element. You could also say document.getElementById("myFormId").reset().

$("#btn1").click(function(){
    $("#form1")[0].reset();

    // OR
    document.getElementById("form1").reset();
});

edited May 23 '17 at 12:08

Community

1
1

answered Sep 07 '12 at 07:04

Tim M.

53,671
14
120
163

1

The accepted answer to that question is just setting the input fields to blank, but a true reset sets all input fields to their original value. – David Hedlund Sep 07 '12 at 07:07
I think the answers to that question collectively cover the important scenarios, though? – Tim M. Sep 07 '12 at 07:09

score 1 · Answer 2 · answered Sep 07 '12 at 07:04

1

This should work:

$("#formid")[0].reset();

answered Sep 07 '12 at 07:04

Jim Garrison

4,199
4
25
39

score 1 · Answer 3 · answered Sep 07 '12 at 07:08

1

try this

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

answered Sep 07 '12 at 07:08

beNerd

3,314
6
54
92

score 0 · Answer 4 · edited Mar 11 '14 at 11:14

0

you could do it like this:

$(function(){
    $('#resetForm').click(function(){
        $('form input[type=text]').val('');});
});

jsfiddle

edited Mar 11 '14 at 11:14

Dirty-flow

2,306
11
30
49

answered Sep 07 '12 at 07:09

mattematico

669
3
14

score 0 · Answer 5 · edited Sep 07 '12 at 10:14

0

add this at the end of the form:

<div style="display='none';" ><input type="reset" id="rst_form"></div>

and try this:

$('#rst_form').click()

edited Sep 07 '12 at 10:14

will-hart

3,742
2
38
48

answered Sep 07 '12 at 08:55

Sergiu

73
7

How to reset a form programmatically?

5 Answers5

Linked