Form Resetting is not working using jquery

Question

I want to reset the form after calling an ajax function. This is the code i gave in the jquery:

$("#frm_silder").reset();

Here frm_silder is the id of form. But when I'm using this code i got an eorror message like this.

$("#frm_silder").reset is not a function

In my html i give the id to form like this:

<form name="frm_silder" id="frm_silder" method="post">

So what is the problem in my code?

Answer 1

In jQuery

$('#frm_silder')[0].reset();

in Javascript

document.getElementById('frm_silder').reset()

Answer 2

You need to reset each element individually. Jquery does not have a function reset() that works on a form. reset() is a Javascript function that works on form elements only. You can however define a new jquery function reset() that iterates through all form elements and calls the javascript reset() on each of them.

$(document).ready(function(){
    $('a').click(function(){
        $('#reset').reset();
    });
});

 // we define a function reset
jQuery.fn.reset = function () {
  $(this).each (function() { this.reset(); });
}

Demo

Alternatively, if you don't want to define a function, you can iterate through the form elements

$(document).ready(function() {
    $('a').click(function() {
        $('#reset').each(function() {
            this.reset();
        });
    });
});

Demo

Source