如何使用jQuery用.reset()方法重置窗体

我有工作代码，可以重置我的表单时，我点击重置按钮。然而，当我的代码变长后，我意识到它不再工作了。

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

这可能是原因之一吗?

当前回答

通过jquery函数. nearest (element)和.find(…)

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

最后，做所需的函数。

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

2015-02-25 05:50:50

其他回答

第一行将重置表单输入

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

第二个将重置select2

可选:如果使用不同的事件注册了不同的类型，则可以使用此选项

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

2019-04-10 10:52:45

使用jQuery reset函数可以快速重置表单字段。

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

$(选择)[0].reset ();

2018-12-19 07:47:55

你可以像这样用id = resetform添加输入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>

2013-07-25 12:15:05

你可以使用下面的方法。

@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-30 04:33:29

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

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

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

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

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

2020-04-26 08:56:44

如何使用jQuery用.reset()方法重置窗体

推荐文章

最新文章

标签