Question

我想在调用ajax函数后重置表单。这是我在jquery中给出的代码：

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

此处frm_silder是表单的ID。但是当我使用这个代码时，我得到了一个像这样的错误消息。

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

在我的html中，我将id形成如下形式：

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

那么我的代码中有什么问题？

Answer 1

在jQuery中

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

在Javascript中

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

Answer 2

您需要单独重置每个元素。 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(); });
}

<强> Demo

或者，如果您不想定义函数，则可以遍历表单元素

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

<强> Demo

<强> Source

Answer 3

我遵循@sameera给出的解决方案。但这仍然让我出错。

我将重设更改为以下内容

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

然后工作正常。

Answer 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("");
        });
    });

使用jquery表单重置不起作用

4 个答案: