334

当我单击重置按钮时，我的工作代码可以重置我的表单。但是，在我的代码变长之后，我意识到它不再起作用了。

<div id="labels">
  <table class="config">
    <thead>
      <tr>
        <th colspan="4"; style= "padding-bottom: 20px; color:#6666FF; text-align:left; font-size: 1.5em">Control Buttons Configuration</th>
      </tr>
      <tr>
        <th>Index</th>
        <th>Switch</th>
        <th>Response Number</th>
        <th>Description</th>
      </tr>
    </thead>
    <tbody>            
      <form id="configform" name= "input" action="#" method="get">
        <tr>
          <td style="text-align: center">1</td>
          <td><img src= "static/switch.png" height="100px" width="108px"></td>
          <td id="small"><input style="background: white; color: black;" type="text" value="" id="number_one"></td>
          <td><input style="background: white; color: black;" type="text"  id="label_one"></td>
        </tr>
        <tr>
          <td style="text-align: center">2</td>
          <td><img src= "static/switch.png" height="100px" width="108px"></td>
          <td id="small"><input style="background: white; color: black;" type="text" id = "number_two" value=""></td>
          <td><input style="background: white; color: black;" type="text"  id = "label_two"></td>
        </tr>
        <tr>
          <td style="text-align: center">3</td>
          <td><img src= "static/switch.png" height="100px" width="108px"></td>
          <td id="small"><input style="background: white; color: black;" type="text" id="number_three" value=""></td>
          <td><input style="background: white; color: black;" type="text" id="label_three"></td>
        </tr>
        <tr>
          <td style="text-align: center">4</td>
          <td><img src= "static/switch.png" height="100px" width="108px"></td>
          <td id="small"><input style="background: white; color: black;" type="text" id="number_four" value=""></td>
          <td><input style="background: white; color: black;" type="text" id="label_three"></td>
        </tr>
        <tr>
          <td></td>
          <td><input type="submit" id="configsubmit" value="Submit"></td>
        </tr>
        <tr>
          <td><input type="reset" id="configreset" value="Reset"></td>
        </tr>
                  
      </form>
    </tbody>
  </table>
            
</div>

还有我的 jQuery：

$('#configreset').click(function(){
    $('#configform')[0].reset();
});

为了使该.reset()方法起作用，我应该在我的代码中包含一些来源吗？以前我使用的是：

<script src="static/jquery.min.js"></script>
<script src="static/jquery.mobile-1.2.0.min.js"></script>

并且该.reset()方法有效。

目前我正在使用

<script src="static/jquery-1.9.1.min.js"></script>      
<script src="static/jquery-migrate-1.1.1.min.js"></script>
<script src="static/jquery.mobile-1.3.1.min.js"></script>

这可能是原因之一吗？

4

16 回答 16

572

您可以尝试使用 trigger() 参考链接

$('#form_id').trigger("reset");
于 2014-07-01T08:14:01.843 回答
297

http://jsfiddle.net/8zLLn/

  $('#configreset').click(function(){
        $('#configform')[0].reset();
  });

把它放在JS小提琴中。按预期工作。

因此，上述问题在这里都没有错。也许你有一个冲突的 ID 问题？点击是否实际执行？

编辑：（因为我很伤心，没有适当的评论能力）这不是你的代码直接的问题。当您将其从当前使用的页面的上下文中取出时，它可以正常工作，因此，它不是具有特定 jQuery/javascript 和属性表单数据的东西，而是其他东西。我会开始将其周围的代码一分为二，并尝试找出它在哪里。我的意思是，只是为了“确保”，我想你可以...

console.log($('#configform')[0]);

在点击功能中，并确保它的目标是正确的形式......

如果是，则必须是此处未列出的内容。

编辑第 2 部分：您可以尝试的一件事（如果它没有正确定位它）是使用“输入：重置”而不是您正在使用的东西......另外，我建议，因为它不是错误地工作的目标实际点击的目标是什么。只需打开萤火虫/开发人员工具，你有什么，折腾

console.log($('#configreset'))

看看会出现什么。然后我们可以从那里开始。

于 2013-05-09T01:51:09.930 回答
112

根据this post here，jQuery没有reset()方法；但原生 JavaScript 可以。因此，使用以下任一方法将 jQuery 元素转换为 JavaScript 对象：

$("#formId")[0].reset()
// or
$("#formId").get(0).reset()
于 2014-02-02T18:57:52.810 回答
50

这是在 vanilla Javascript 中比在 jQuery 中更容易完成的事情之一。jQuery 没有reset方法，但 HTML 表单元素有，因此您可以像这样重置表单中的所有字段：

document.getElementById('configform').reset();

如果您通过 jQuery 执行此操作（如此处的其他答案所示：）$('#configform')[0].reset()，则将[0]获取与您直接通过document.getElementById. 后一种方法更有效也更简单（因为使用 jQuery 方法，您首先获取一个集合，然后必须从中获取一个元素，而使用 vanilla Javascript，您只需直接获取元素）。

于 2016-03-02T17:51:43.883 回答
29

第一行将重置表单输入

$('form#myform').trigger("reset"); //Line1
$('form#myform select').trigger("change"); //Line2

第二个将重置 select2

可选：如果您使用不同的事件注册了不同的类型，则可以使用它

$('form#myform select, form input[type=checkbox]').trigger("change"); //Line2
于 2019-04-10T10:52:45.517 回答
28

重置按钮根本不需要任何脚本（或名称或 ID）：

<input type="reset">

你就完成了。但是如果你真的必须使用脚本，请注意每个表单控件都有一个表单属性来引用它所在的表单，所以你可以这样做：

<input type="button" onclick="this.form.reset();">

但是重置按钮是更好的选择。

于 2013-05-09T02:29:15.880 回答
23

我终于解决了问题！！@RobG 关于form标签和table标签是正确的。标签应该放在表格外面。form接着就，随即，

<td><input type="reset" id="configreset" value="Reset"></td>

无需 jquery 或其他任何东西即可工作。只需点击按钮，tadaa~ 整个表格就被重置了；）太棒了！

于 2013-05-15T01:55:39.630 回答
20

jQuery没有reset()方法；但原生JavaScript可以。因此，使用以下任一方法将 jQuery 元素转换为 JavaScript 对象：

$("#formId")[0].reset();

$("#formId").get(0).reset();

我们可以简单地使用 Javascript 代码

document.getElementById("formid").reset();
于 2020-04-26T08:56:44.410 回答
17

我使用这个简单的代码：

//reset form 
$("#mybutton").click(function(){
    $("#myform").find('input:text, input:password, input:file, select, textarea').val('');
    $("#myform").find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected');
});
于 2014-05-15T16:46:09.237 回答
13

通过使用 jquery 函数.closest(element)和.find(...)。

获取父元素并寻找子元素。

最后，做需要的功能。

$("#form").closest('form').find("input[type=text], textarea").val("");
于 2015-02-25T05:50:50.540 回答
5

使用这个 jQuery 重置功能可以快速重置表单字段。

当您获得成功响应时，然后触发以下代码。

$(selector)[0].reset();

于 2018-12-19T07:47:55.863 回答
4

您可以像这样添加一个输入类型 = 使用 id = resetform 重置

<html>
<form>
<input type = 'reset' id = 'resetform' value = 'reset'/>
<!--Other items in the form can be placed here-->
</form>
</html>

然后使用 jquery，您只需在 id = resetform 的元素上使用 .click() 函数，如下所示

<script> 
$('#resetform').click();
</script>

并且表单重置注意：您还可以使用您的 css 隐藏带有 id = resetform 的重置按钮

<style>
#resetform
{
display:none;
}
</style>
于 2013-07-25T12:15:05.130 回答
3

这是使用 Jquery 的简单解决方案。它在全球范围内有效。看看代码。

$('document').on("click", ".clear", function(){
   $(this).closest('form').trigger("reset");
})

在您需要重置它的每个表单中为按钮添加一个清晰的类。例如：

<button class="button clear" type="reset">Clear</button>
于 2018-09-01T07:13:32.917 回答
2 
<button type="reset">Reset</reset>

我能想到的最简单的方法是健壮的。放置在表单标签内。

于 2014-07-09T10:46:32.380 回答
0

您的代码应该可以工作。确保static/jquery-1.9.1.min.js存在。此外，您可以尝试恢复为static/jquery.min.js. 如果这样可以解决问题，那么您已经查明了问题所在。

于 2013-05-09T01:54:04.587 回答
-1

您可以使用以下内容。

@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("");
        });
    });
于 2019-07-30T04:33:29.753 回答