CODEWITHSUNDEEP
javascriptjqueryajax
Kichu
Kichu

Reputation: 3267

Form Resetting is not working using jquery

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?

Upvotes: 14

Views: 51605

Answers (4)

RainyTears
RainyTears

Reputation: 189

You can use the following.

   @using (Html.BeginForm("MyAction", "MyController", new { area = "MyArea" }, FormMethod.Post, new { @class = "" }))
    {
        <div class="col-md-6">
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                @Html.LabelFor(m => m.MyData, new { @class = "col-form-label" })
            </div>
            <div class="col-lg-9 col-md-9 col-sm-9 col-xs-12">
                @Html.TextBoxFor(m => m.MyData, new { @class = "form-control" })
            </div>
        </div>
        <div class="col-md-6">
            <div class="">
                <button class="btn btn-primary" type="submit">Send</button>
                <button class="btn btn-danger" type="reset"> Clear</button>
            </div>
        </div>
    }

Then clear the form:

    $('.btn:reset').click(function (ev) {
        ev.preventDefault();
        $(this).closest('form').find("input").each(function(i, v) {
            $(this).val("");
        });
    });

Upvotes: 0

Krishna Rani Sahoo
Krishna Rani Sahoo

Reputation: 1539

I followed the solution given by @sameera. But it still throw me error.

I changed the reset to the following

$("form#frm_silder")[0].reset();

Then it worked fine.

Upvotes: 0

Ayush
Ayush

Reputation: 42440

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

Upvotes: 4

Sameera Thilakasiri
Sameera Thilakasiri

Reputation: 9498

In jQuery

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

in Javascript

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

Upvotes: 35

Related Questions