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

问题描述 投票:222回答:14

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

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

可能是其中一个原因吗?

javascript jquery forms reset
14个回答
379
投票

你可以尝试使用trigger()Reference Link

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

4
投票

第一行将重置表单输入

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

第二个将重置select2


2
投票
<button type="reset">Reset</reset>

我能想到的最简单的方法是强大的。放置在表单标记内。


1
投票

这是Jquery的简单解决方案。它在全球运作。看看代码。

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

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

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

1
投票

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

当你得到成功的回应然后开火下面的代码。

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


0
投票

你的代码应该有效。确保static/jquery-1.9.1.min.js存在。此外,您可以尝试恢复到static/jquery.min.js。如果这解决了问题,那么你已经找到了问题。


263
投票

http://jsfiddle.net/8zLLn/

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

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

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

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

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

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

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

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

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

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


106
投票

根据这篇文章here,jQuery没有reset()方法;但原生JavaScript确实如此。因此,通过使用以下命令将jQuery元素转换为JavaScript对象:

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

43
投票

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

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

如果你通过jQuery执行此操作(如其他答案中所示:$('#configform')[0].reset()),[0]将获取与您直接通过document.getElementById获得的相同形式的DOM元素。后一种方法既更高效又更简单(因为使用jQuery方法,您首先获得一个集合,然后必须从中获取一个元素,而使用vanilla Javascript,您只需直接获取元素)。


21
投票

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

<input type="reset">

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

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

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


18
投票

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

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

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


12
投票

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

获取父元素并寻找孩子。

最后,完成所需的功能。

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

11
投票

我用这个简单的代码:

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

4
投票

你可以像这样添加一个id = resetform的input type = reset

<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>
© www.soinside.com 2019 - 2024. All rights reserved.