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 288 · Accepted Answer · edited Jun 30 '21 at 18:39

288

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,582
24
30

answered Sep 24 '10 at 11:43

Nick Craver

623,446
136
1,297
1,155

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 49 · Answer 2 · edited Nov 29 '13 at 05:33

49

You can simply do:

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

edited Nov 29 '13 at 05:33

answered Nov 10 '13 at 10:18

user2057484

971
1
8
5

2

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

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

27

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

33,303
119
337
498

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
The code has two operations: reset the form and truncate the fields? – Timo Jul 09 '22 at 10:52

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

9

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,793
13
73
97

answered Jan 16 '14 at 11:33

alexbobroff

91
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

28,495
9
107
102

answered Sep 24 '10 at 12:06

Alpesh

5,307
2
19
19

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

5

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,484
3
27
48

answered Jun 11 '15 at 05:15

Nagaraju Vuppala

59
1
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

2,050
1
25
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

21,122
10
69
105

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

549
5
11

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

2

You could use the following:

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

answered Nov 16 '18 at 08:29

Justlearning

43
5

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,872
20
26

score 0 · Answer 13 · answered May 01 '23 at 11:31

trigger form reset, remove checked + selected attributes (triggering reset doesn't remove attributes) and empty input values

$(document).on('click', 'button[data-reset-form]', function(e){
   e.preventDefault();
   $('form.my-form').trigger('reset')
   $('form.my-form').find('[checked]').removeAttr('checked')
   $('form.my-form').find('[selected]').removeAttr('selected')
   $('form.my-form').find('input').val('');
 })

score -3 · Answer 14 · 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?

14 Answers14

Linked

Related