关于javascript：如何使用jQuery与.reset()方法重置表单


How to reset a form using jQuery with .reset() method

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
        <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>

而我的jQuery：

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

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

1
2
3
<script src="static/jquery.min.js">

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

并且.reset()方法正在工作。

目前我正在使用

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

可能是原因之一吗？

相关讨论

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

1
$('#form_id').trigger("reset");
相关讨论

http://jsfiddle.net/8zLLn/

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

将其放在JS小提琴中。按预期工作。

因此，上述任何问题都没有错。也许您遇到冲突的ID问题？点击是否实际执行？

编辑：(因为我是一个没有适当评论能力的麻袋)这不是直接与您的代码有关的问题。当您将其从当前使用的页面上下文中移出时，它可以很好地工作，因此，与其使用特定的jQuery / javascript和属性表单数据代替它，不如将其作为其他东西。我将开始将其周围的代码一分为二，然后尝试查找发生了什么。我的意思是，只是为了"确定"，我想你可以...

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

在点击功能中，并确保它定位到正确的表单...

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

编辑第2部分：您可以尝试的一件事(如果未正确定位)是使用" input：reset"而不是您正在使用的...。此外，我建议您这样做，因为这不是错误地找出目标的原因实际点击的目标是什么。只需打开Firebug /开发人员工具，您拥有什么，就可以投入使用

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

看看会弹出什么。然后我们可以从那里去。

相关讨论

根据此处的这篇文章，jQuery没有reset()方法。但是原生JavaScript可以。因此，可以使用以下任一方法将jQuery元素转换为JavaScript对象：

1
2
3
$("#formId")[0].reset()
// or
$("#formId").get(0).reset()
相关讨论

实际上，这是在原始Javascript中比jQuery更容易完成的事情之一。 jQuery没有reset方法，但是HTML Form Element具有，因此您可以按以下形式重置所有字段：

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

如果通过jQuery执行此操作(如在其他答案中找到的那样：$('#configform')[0].reset())，则[0]正在获取与直接通过document.getElementById获取的相同形式的DOM元素。不过，后一种方法既高效又简单(因为使用jQuery方法，您首先要获取一个集合，然后必须从中获取一个元素，而使用香草Javascript，您只能直接获取该元素)。

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

1
<input type="reset">

到此为止。但是，如果您确实必须使用脚本，请注意，每个表单控件都有一个引用其所在表单的form属性，因此您可以执行以下操作：

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

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

相关讨论

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

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

不需要jquery或其他任何东西就可以工作。只需单击按钮，然后tadaa?整个表单将被重置;)辉煌！

相关讨论

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

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

最后，执行所需的功能。

1
$("#form").closest('form').find("input[type=text], textarea").val("");
相关讨论

我使用以下简单代码：

1
2
3
4
5
//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');
});
相关讨论

第一行将重置表单输入

1
2
$('#AddRowform').trigger("reset");
$('#AddRowform select').trigger("change");

第二个将重置select2

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

当您获得成功响应时，请在代码下方执行。

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

您可以像这样添加输入类型=重置ID =重置表单

1
2
3
4
5
6
<html>
<form>
<input type = 'reset' id = 'resetform' value = 'reset'/>
<!--Other items in the form can be placed here-->
</form>
</html>

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

1
$('#resetform').click();

然后表格重置
注意：您还可以使用CSS隐藏ID = resetform的重置按钮。

1
2
3
4
5
6
<style>
#resetform
{
display:none;
}
</style>
相关讨论

这是使用Jquery的简单解决方案。它在全球范围内运作。看一下代码。

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

在您需要重置按钮的每种形式的按钮中添加一个明确的类。例如：

1
<button class="button clear" type="reset">Clear</button>
1
<button type="reset">Reset</reset>

我认为最简单的方法就是强大。放置在表单标签中。

您可以使用以下内容。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@using (Html.BeginForm("MyAction","MyController", new { area ="MyArea" }, FormMethod.Post, new { @class ="" }))
{

   
        @Html.LabelFor(m => m.MyData, new { @class ="col-form-label" })
   
   
        @Html.TextBoxFor(m => m.MyData, new { @class ="form-control" })
   


   
        <button class="btn btn-primary" type="submit">Send</button>
        <button class="btn btn-danger" type="reset"> Clear</button>
   

}

然后清除表格：

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

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

相关讨论