Сброс формы не работает с помощью jquery

Я хочу reset форму после вызова функции ajax. Это код, который я дал в jquery:

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

Здесь frm_silder - id формы. Но когда я использую этот код, у меня появилось сообщение об ошибке.

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

В моем html я даю идентификатор, чтобы он выглядел так:

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

Так в чем проблема в моем коде?

Ответы

Ответ 1

В jQuery

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

в Javascript

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

Ответ 2

Вам нужно reset каждый элемент отдельно. JQuery не имеет функции reset(), которая работает в форме. reset() - это функция Javascript, которая работает только с элементами формы. Однако вы можете определить новую функцию jQuery reset(), которая выполняет итерацию через все элементы формы и вызывает javascript reset() для каждого из них.

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

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

Демо

В качестве альтернативы, если вы не хотите определять функцию, вы можете выполнять итерацию через элементы формы

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

Демо

Источник

Ответ 3

Я следовал за решением, данным @sameera. Но это все равно вызывает у меня ошибку.

Я изменил сброс на следующий

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

Тогда все работало нормально.

Ответ 4

Вы можете использовать следующее.

   @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>
    }

Затем очистите форму:

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