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

2020/10/07 16:01 · javascript ·  · 0评论

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

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

可能是原因之一吗?

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

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

http://jsfiddle.net/8zLLn/

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

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

因此,上述任何问题都没有错。也许您有一个冲突的ID问题?点击是否实际执行?

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

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

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

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

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

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

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

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

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

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

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

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

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

<input type="reset">

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

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

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

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

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

无需jquery或其他任何东西即可工作。只需单击按钮,然后tadaa〜整个表单将被重置;)辉煌!

我使用以下简单代码:

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

通过使用jQuery函数.closest(元素).find(...)

获取元素并寻找孩子

最后,执行所需的功能。

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

第一行将重置表单输入

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

第二个将重置select2

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

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

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

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

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

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

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

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

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

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

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

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

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

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

在您需要重置按钮的每种形式的按钮中添加清除类。例如:

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

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

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

您可以使用以下内容。

@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("");
        });
    });
本文地址:http://javascript.askforanswer.com/ruheshiyongjqueryyu-resetfangfazhongzhibiaodan.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇: