[英]How to reset a form using jQuery with .reset() method
当我点击重置按钮时,我有可以重置我的表单的工作代码。 但是,在我的代码变长之后,我意识到它不再起作用了。
<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");
$('#configreset').click(function(){
$('#configform')[0].reset();
});
把它放在JS小提琴中。 按预期工作。
因此,上述问题都没有错。 也许您遇到了 ID 冲突问题? 点击是否实际执行?
编辑:(因为我是一个没有适当评论能力的悲伤麻袋)这不是你的代码直接的问题。 当您将它从当前使用的页面的上下文中取出时,它可以正常工作,因此,它不是具有特定 jQuery/javascript 和属性表单数据的东西,而是其他东西。 我会开始将它周围的代码一分为二,并尝试找出它发生的地方。 我的意思是,只是为了“确保”,我想你可以……
console.log($('#configform')[0]);
在点击功能中,并确保它的目标是正确的形式...
如果是,则必须是此处未列出的内容。
编辑第 2 部分:你可以尝试的一件事(如果它没有正确定位)是使用“输入:重置”而不是你正在使用的......此外,我建议因为它不是错误地找出目标实际点击的目标是什么。 只需打开firebug/开发人员工具,你有什么,扔进去
console.log($('#configreset'))
看看会弹出什么。 然后我们可以从那里开始。
根据这里的这篇文章,jQuery 没有reset()
方法; 但是原生 JavaScript 可以。 因此,使用以下任一方法将 jQuery 元素转换为 JavaScript 对象:
$("#formId")[0].reset()
// or
$("#formId").get(0).reset()
这是在 vanilla Javascript 中比在 jQuery 中更容易完成的事情之一。 jQuery 没有reset
方法,但 HTML 表单元素有,因此您可以像这样重置表单中的所有字段:
document.getElementById('configform').reset();
如果您通过 jQuery 执行此操作(如此处的其他答案所示: $('#configform')[0].reset()
),则[0]
正在获取与您直接通过document.getElementById
获取的表单 DOM 元素相同的表单元素. 不过,后一种方法更有效也更简单(因为使用 jQuery 方法,您首先获得一个集合,然后必须从中获取一个元素,而使用 vanilla Javascript,您只需直接获取元素)。
重置按钮根本不需要任何脚本(或名称或 ID):
<input type="reset">
你就完成了。 但是如果你真的必须使用脚本,请注意每个表单控件都有一个引用它所在表单的表单属性,所以你可以这样做:
<input type="button" onclick="this.form.reset();">
但是重置按钮是一个更好的选择。
第一行将重置表单输入
$('form#myform').trigger("reset"); //Line1
$('form#myform select').trigger("change"); //Line2
第二个将重置 select2
可选:如果您使用不同的事件注册了不同的类型,则可以使用它
$('form#myform select, form input[type=checkbox]').trigger("change"); //Line2
我终于解决了问题!! @RobG 关于form
标签和table
标签是正确的。 form
标签应该放在表格的外面。 接着就,随即,
<td><input type="reset" id="configreset" value="Reset"></td>
无需 jquery 或其他任何东西即可工作。 简单地点击按钮,tadaa~整个表格都被重置了;) 太棒了!
jQuery没有reset()
方法; 但是原生JavaScript可以。 因此,使用以下任一方法将 jQuery 元素转换为 JavaScript 对象:
$("#formId")[0].reset();
$("#formId").get(0).reset();
我们可以简单地使用 Javascript 代码
document.getElementById("formid").reset();
我使用这个简单的代码:
//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(element)和.find(...) 。
获取父元素并寻找子元素。
最后,做需要的功能。
$("#form").closest('form').find("input[type=text], textarea").val("");
使用此 jQuery 重置功能可以快速重置表单字段。
当您收到成功响应时,请在下面的代码中触发。
$(selector)[0].reset();
你可以像这样添加一个 input type = 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>
这是 Jquery 的简单解决方案。 它在全球范围内有效。 看看代码。
$('document').on("click", ".clear", function(){
$(this).closest('form').trigger("reset");
})
在您需要重置它的每种形式的按钮中添加一个 clear 类。 例如:
<button class="button clear" type="reset">Clear</button>
<button type="reset">Reset</reset>
我能想到的最简单的方法是健壮。 放置在表单标签内。
您的代码应该可以工作。 确保static/jquery-1.9.1.min.js
存在。 此外,您可以尝试恢复为static/jquery.min.js
。 如果这解决了问题,那么您已经确定了问题所在。
您可以使用带有样式的此表单: https : //codepen.io/AFM93/pen/dyvwqwj
HTML:
<form class="formReset"><form>
JS:
$('.formReset')[0].reset();
您可以使用以下内容。
@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("");
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.