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（）Reference Link

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

Answer 2

http://jsfiddle.net/8zLLn/

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

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

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

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

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

点击功能中的

并确保其定位正确的表单...

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

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

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

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

Answer 3

根据这篇文章here，jQuery没有reset()方法;但原生JavaScript确实如此。因此，通过使用：

将jQuery元素转换为JavaScript对象

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

Answer 4

这是在jilla中使用vanilla Javascript实际上更容易完成的事情之一。 jQuery没有reset方法，但HTML表单元素有，所以你可以重置这样的表格中的所有字段：

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

如果您通过jQuery执行此操作（如此处的其他答案中所示：$('#configform')[0].reset()），[0]将获取您将直接通过document.getElementById获取的相同表单DOM元素。后一种方法更高效，更简单（因为使用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函数 .closest（element）和 .find（...）。

获取父元素并寻找孩子。

最后，完成所需的功能。

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

Answer 8

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

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

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

我们可能只使用Javascript代码

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

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

你可以添加一个输入类型= reset，其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>

Answer 11

<button type="reset">Reset</reset>

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

Answer 12

第一行将重置表单输入

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

第二个将重置select2

Answer 13

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

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

以您需要重置按钮的每种形式向按钮添加清除类。例如：

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

Answer 14

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

获得成功响应后，在代码下方触发。

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

Answer 15

您可以使用以下内容。

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

Answer 16

您可以使用以下样式的表单：https://codepen.io/AFM93/pen/dyvwqwj

HTML：

{
    "data": [
        {
            "object_id": "23843009595880561",
            "event_time": "2019-08-08T13:38:44+0000",
            "extra_data": '{"old_value":"BID_CAP","new_value":"BID_CAP","additional_value": {"old_value":9500,"new_value":8800,"currency":"ARS","type":"payment_amount"}, "adset_minimum_return_on_ad_spend":{"old_value":null,"new_value":null},"type":"bid_type"}',
            "object_name": "LK 17 - 50 - Eventos PX - 1%",
        },
        # ....
    ]
}

JS：

<form class="formReset"><form>

Answer 17

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

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

17 个答案: