How to reset (clear) form through JavaScript?

Question

I have tried $("#client.frm").reset(); but it is not working.So how to reset form via jQuery?

Possible duplicate of http://stackoverflow.com/questions/680241/blank-out-a-form-with-jquery — svk, Sep 24 '10 at 11:45
Note: Clear and Reset are two different things. Reset (`.reset()`) will put the values back to the original values in the HTML. For this, see Nick Craver's solution below. "Clear" typically means to set the values back to blank / unchecked / unselected; see MahmoudS solution. — Luke, Jun 26 '14 at 15:43

score 274 · Accepted Answer · edited Jun 30 '21 at 18:39

274

form.reset() is a DOM element method (not one on the jQuery object), so you need:

$("#client.frm")[0].reset();
//faster version:
$("#client")[0].reset();

Or without jQuery:

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

Note: reset() function does not work if form contains any field with attribute:

name='reset'

edited Jun 30 '21 at 18:39

Stefan Gruenwald

2,512
23
27

answered Sep 24 '10 at 11:43

Nick Craver

610,884
134
1,288
1,151

5

My brain just expanded, thanks: "A jQuery object is an array-like wrapper around one or more DOM elements. To get a reference to the actual DOM elements (instead of the jQuery object), you have two options. The first (and fastest) method is to use array notation: $( "#foo" )[ 0 ]; // Equivalent to document.getElementById( "foo" ) The second method is to use the .get() function: $( "#foo" ).get( 0 ); // Identical to above, only slower." http://learn.jquery.com/using-jquery-core/faq/how-do-i-pull-a-native-dom-element-from-a-jquery-object/ – Andrew Jun 14 '14 at 15:08
I get next error: TypeError: document.getElementById(...).reset is not a function[Learn More]. I use FormValidate plugin for form. its resetForm does not reset form too =( Any suggestions? – Eugen Konkov Oct 23 '18 at 14:35
Eugen, here's where, much like Indiana Jones and The Last Crusade, you must take a leap of faith. If you call document.getElementById('myform').reset() it will actually clear the form even though that method seems to not exist. Typical M$ obfuscation. – Newclique Mar 27 '19 at 16:32

score 47 · Answer 2 · edited Nov 29 '13 at 05:33

47

You can simply do:

$("#client.frm").trigger('reset')

edited Nov 29 '13 at 05:33

answered Nov 10 '13 at 10:18

user2057484

911
1
8
5

2

a `Trigger` brings me to new world – gonatee Jun 16 '17 at 17:01

score 24 · Answer 3 · answered Jun 25 '13 at 12:20

24

Pure JS solution is as follows:

function clearForm(myFormElement) {

  var elements = myFormElement.elements;

  myFormElement.reset();

  for(i=0; i<elements.length; i++) {

  field_type = elements[i].type.toLowerCase();

  switch(field_type) {

    case "text":
    case "password":
    case "textarea":
          case "hidden":

      elements[i].value = "";
      break;

    case "radio":
    case "checkbox":
        if (elements[i].checked) {
          elements[i].checked = false;
      }
      break;

    case "select-one":
    case "select-multi":
                elements[i].selectedIndex = -1;
      break;

    default:
      break;
  }
    }
}

answered Jun 25 '13 at 12:20

Mahmoud Saleh

32,503
116
326
490

1

Here is jQuery plugin solution that should be roughly equivalent. http://stackoverflow.com/a/24496012/1766230 (I used your `selectedIndex = -1` trick.) – Luke Jun 30 '14 at 18:02
5

This solution does not work now (in 2016). When form has default values for text, password and textarea inputs, you should use elements[i].defaultValue="" instead of elements[i].value="". – Andrew F. Aug 14 '16 at 17:57
```var field_type = elements[i].type.toLowerCase();``` – Martynas Januškauskas Mar 20 '18 at 07:56
@Andrew: It depends on what you want. If you just want to reset the form to the `defaultValue`s, you could just call `reset()` on the form object. The code here is to _clear_ the form, rather than reset it. – Protector one Mar 15 '19 at 15:23
Nice function. I just had to add the type "number" to the first case. – Salvador Maine Dec 11 '21 at 08:01

score 8 · Answer 4 · edited Dec 16 '16 at 08:18

8

Note, function form.reset() will not work if some input tag in the form have attribute name='reset'

edited Dec 16 '16 at 08:18

Mistalis

17,145
13
72
95

answered Jan 16 '14 at 11:33

alexbobroff

81
1
1

I couldn't for the life of me work out why it wouldn't work. Then the button I was using to reset had `id="reset"` changed to `id="rst"` and all is working fine. – Lewis Morris Nov 05 '21 at 20:52

score 6 · Answer 5 · edited Apr 01 '21 at 08:53

6

The .reset() method does not clear the default values and checkbox field and there are many more issues.

In order to completely reset check the below link -

http://www.javascript-coder.com/javascript-form/javascript-reset-form.htm

edited Apr 01 '21 at 08:53

Serge Stroobandt

24,143
8
98
91

answered Sep 24 '10 at 12:06

Alpesh

5,177
2
18
18

score 4 · Answer 6 · edited Jun 11 '15 at 05:53

4

Clear the form as follows

document.forms[0].reset();

You can simply clear the form elements within the group. by using this forms[0].

edited Jun 11 '15 at 05:53

captainsac

2,454
3
24
47

answered Jun 11 '15 at 05:15

Nagaraju Vuppala

49
1

score 4 · Answer 7 · answered Jun 11 '15 at 06:05

4

Reset (Clear) Form throught Javascript & jQuery:

Example Javascript:

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

Example jQuery:

You may try using trigger() Reference Link

$('#client.frm').trigger("reset");

answered Jun 11 '15 at 06:05

GIPSSTAR

1,948
1
23
20

score 2 · Answer 8 · edited Oct 29 '13 at 12:24

2

Use JavaScript function reset():

document.forms["frm_id"].reset();

edited Oct 29 '13 at 12:24

DontVoteMeDown

20,534
10
70
102

answered Oct 29 '13 at 11:57

Felix Bagur

31
1

score 2 · Answer 9 · answered Dec 05 '13 at 09:01

2

Try this :

$('#resetBtn').on('click', function(e){
    e.preventDefault();
    $("#myform")[0].reset.click();
}

answered Dec 05 '13 at 09:01

Hazem_M

529
5
11

score 1 · Answer 10 · answered Nov 16 '18 at 08:29

1

You could use the following:

$('[element]').trigger('reset')

answered Nov 16 '18 at 08:29

Justlearning

13
3

score 0 · Answer 11 · answered Jun 11 '15 at 05:21

Try this code. A complete solution for your answer.

    <!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(":reset").css("background-color", "red");
});
</script>
</head>
<body>

<form action="">
  Name: <input type="text" name="user"><br>
  Password: <input type="password" name="password"><br>
  <button type="button">Useless Button</button>
  <input type="button" value="Another useless button"><br>
  <input type="reset" value="Reset">
  <input type="submit" value="Submit"><br>
</form>

</body>
</html>

score 0 · Answer 12 · answered Jun 08 '21 at 11:06

0

Use this simple trick to reset the form

_("form_id").reset();

answered Jun 08 '21 at 11:06

Avinash Raut

1,536
14
23

score -3 · Answer 13 · answered Jan 16 '19 at 06:22

You can clear the whole form using onclick function.Here is the code for it.

 <button type="reset" value="reset" type="reset" class="btnreset" onclick="window.location.reload()">Reset</button>

window.location.reload() function will refresh your page and all data will clear.

How to reset (clear) form through JavaScript?

13 Answers13

Linked

Related