144

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

Improve this question
2
  • Possible duplicate of stackoverflow.com/questions/680241/blank-out-a-form-with-jquery Commented Sep 24, 2010 at 11:45
  • 11
    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. Commented Jun 26, 2014 at 15:43

11 Answers 11

Reset to default
295

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'
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

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." learn.jquery.com/using-jquery-core/faq/…
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, 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.
51

You can simply do:

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

Improve this answer

Comments

30

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":
      case "number":
      case "date":    
        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;
    }
  }
}
Improve this answer

6 Comments

Here is jQuery plugin solution that should be roughly equivalent. stackoverflow.com/a/24496012/1766230 (I used your selectedIndex = -1 trick.)
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="".
var field_type = elements[i].type.toLowerCase();
@Andrew: It depends on what you want. If you just want to reset the form to the defaultValues, you could just call reset() on the form object. The code here is to clear the form, rather than reset it.
Nice function. I just had to add the type "number" to the first case.
|
11

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

Improve this answer

1 Comment

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

Clear the form as follows

document.forms[0].reset();

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

Improve this answer

Comments

5

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

Improve this answer

Comments

2

Use JavaScript function reset():

document.forms["frm_id"].reset();
Improve this answer

Comments

2

Try this :

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

Comments

2

You could use the following:

$('[element]').trigger('reset')
Improve this answer

Comments

1

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('');
 })
Improve this answer

Comments

-4

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.

Improve this answer

Comments