如何使用带有.reset()方法的jQuery重置表单

Question

当我点击重置按钮时,我有可以重置表单的工作代码.然而,在我的代码变得越来越长之后,我意识到它不再起作用了.

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

可能是其中一个原因吗？

Answer 1

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

$('#form_id').trigger("reset");

Answer 2

http://jsfiddle.net/8zLLn/

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

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

因此,上述问题都不是错误的.也许你的ID问题存在冲突？点击是否实际执行？

编辑:(因为我没有适当的评论能力,这是一个悲伤的麻袋)这不是你的代码直接问题.当你把它从你当前使用的页面的上下文中取出时,它工作正常,因此,它不是具有特定jQuery/javascript和归属表单数据的东西,它必须是别的东西.我开始将它周围的代码一分为二,并试图找到它的位置.我的意思是,只是'确定',我想你可以......

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

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

如果是的话,它必须是这里没有列出的东西.

编辑第2部分:你可以尝试的一件事(如果它没有正确定位)是使用"输入:重置"而不是你正在使用的...也,我建议因为它不是目标是错误的工作找出实际点击的目标是什么.只需打开萤火虫/开发者工具,你就可以投入

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

然后看看弹出的是什么.然后我们就可以从那里开始.

Answer 3

根据这个帖子在这里,jQuery有没有reset()方法; 但原生JavaScript确实如此.因此,通过使用以下命令将jQuery元素转换为JavaScript对象:

$("#formId")[0].reset()
// or
$("#formId").get(0).reset()

Answer 4

这是在vanilla Javascript中比jQuery更容易完成的事情之一.jQuery没有reset方法,但HTML表单元素有,所以你可以重置这样的表格中的所有字段:

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

如果你通过jQuery这样做(在这里的其他答案中可以看到:) $('#configform')[0].reset(),那[0]就是获取你将直接获得的相同形式的DOM元素document.getElementById.后一种方法既更高效又更简单(因为使用jQuery方法,您首先获得一个集合,然后必须从中获取一个元素,而使用vanilla Javascript,您只需直接获取元素).

Answer 5

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

<input type="reset">

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

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

但重置按钮是一个更好的选择.

Answer 6

我终于解决了这个问题!! @RobG对form标签和table标签是正确的.该form标签应放置在表外.接着就,随即,

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

无需jquery或其他任何工作.简单点击按钮和tadaa~整个表格被重置;)辉煌!

Answer 7

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

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

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

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

document.getElementById("formid").reset();

Answer 8

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

获取父元素并寻找孩子.

最后,完成所需的功能.

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

Answer 9

我用这个简单的代码:

//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');
});

Answer 10

第一行将重置表单输入

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

第二个将重置select2

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

$('form#myform select, form input[type=checkbox]').trigger("change"); //Line2

Answer 11

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

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

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