Fatal编程技术网
  • javascript/
  • Javascript 如何使用jQuery with.reset（）方法重置窗体

Javascript 如何使用jQuery with.reset（）方法重置窗体

javascript jquery forms

Javascript 如何使用jQuery with.reset（）方法重置窗体,javascript,jquery,forms,reset,Javascript,Jquery,Forms,Reset,我有一个工作代码，当我点击重置按钮时，它可以重置我的表单。然而，在我的代码变得越来越长之后，我意识到它不再工作了 控制按钮配置 指数 转换 响应号 描述 1. 2. 3. 4. 还有我的jQuery： $（'#配置重置'）。单击（函数（）{ $（'#configform'）[0].reset（）； }); 为了使.reset（）方法正常工作，我是否应该在代码中包含一些源代码？以前我使用的是： .reset（）方法正在工作 目前我正在使用 这可能是原因之一吗？ 把它放在小提琴里。按计

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


控制按钮配置
指数
转换
响应号
描述
1.
2.
3.
4.
还有我的jQuery：

$（'#配置重置'）。单击（函数（）{
$（'#configform'）[0].reset（）；
});
为了使
.reset（）
方法正常工作，我是否应该在代码中包含一些源代码？以前我使用的是：



.reset（）
方法正在工作

目前我正在使用
这可能是原因之一吗？

把它放在小提琴里。按计划工作

因此，上述问题在这里都没有错。也许你的身份有冲突？单击是否实际执行

编辑：（因为我是一个没有适当评论能力的可怜虫）这与你的代码没有直接关系。当您将它从当前使用的页面的上下文中取出时，它工作得很好，因此，它不是带有特定jQuery/javascript&属性化表单数据的东西，而是其他东西。我会开始把它周围的代码一分为二，然后试着找出它是怎么回事。我是说，为了“确定”，我想你可以

console.log($('#configform')[0]);
在“单击”功能中，确保它的目标是正确的表单

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

编辑第2部分：你可以尝试的一件事（如果它没有正确地瞄准它）是使用，而不是你正在使用的。。。另外，我建议，因为不是目标不正确地找出实际点击的目标。只要打开firebug/developer工具，不管你有什么，投入进去

console.log($('#configreset'))
看看会出现什么。然后我们可以从那里开始。

您的代码应该可以工作。确保
static/jquery-1.9.1.min.js
存在。此外，您还可以尝试还原到
静态/jquery.min.js
。如果这解决了问题，那么您已经查明了问题。

重置按钮根本不需要任何脚本（或名称或id）：
你完成了。但是如果您确实必须使用脚本，请注意每个表单控件都有一个引用其所在表单的表单属性，因此您可以执行以下操作：

<input type="button" onclick="this.form.reset();">
但是重置按钮是一个更好的选择。

我终于解决了这个问题！！ @RobG对
表单
标签和
表格
标签的看法是正确的表单标签应放在表外。这样

<td><input type="reset" id="configreset" value="Reset"></td>
无需jquery或其他任何东西即可工作。只需点击按钮，tadaa~整个表单就会重置；）太棒了

您只需添加一个id=resetform的输入类型=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>


$（'#resetform'）。单击（）；
然后表单重置 注意：您还可以使用css隐藏id=resetform的reset按钮

<style>
#resetform
{
display:none;
}
</style>


#重置形式
{
显示：无；
}
根据这篇文章，jQuery没有
reset（）
方法；但本地JavaScript确实如此。因此，使用以下方法之一将jQuery元素转换为JavaScript对象：

$("#formId")[0].reset()
// or
$("#formId").get(0).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');
});
您可以尝试使用trigger（）

重置
我能想到的最简单的方法就是健壮。使用jquery函数.closest（element）和.find（…）将其放置在表单标记中。

获取父元素并查找子元素

最后，完成所需的功能

$("#form").closest('form').find("input[type=text], textarea").val("");
这是在vanilla Javascript中比jQuery更容易完成的事情之一。jQuery没有reset方法，但HTML表单元素有，因此可以像这样重置表单中的所有字段：

document.getElementById('configform').reset();
如果您通过jQuery执行此操作（如这里的其他答案所示：
$（'#configform'）[0].reset（）
），则
[0]
将获取与您通过
document.getElementById
直接获取的相同表单DOM元素。不过，后一种方法更高效、更简单（因为使用jQuery方法，您首先获取集合，然后必须从集合中获取元素，而使用普通Javascript，您只需直接获取元素）。

以下是使用jQuery的简单解决方案。它在全球范围内发挥作用。看看代码

$('document').on("click", ".clear", function(){
   $(this).closest('form').trigger("reset");
})
在需要重置按钮的每个表单中，向按钮添加一个clear类。例如：

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

清除
使用jQuery重置功能可以快速重置表单字段

当您得到成功响应后，按下面的代码开火

$（选择器）[0]。重置（）
第一行将重置表单输入


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


第二个将重置select2

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


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



您可以使用以下命令


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



jQuery没有
reset（）
方法；但是原生的JavaScript是这样的。因此，使用以下方法之一将jQuery元素转换为JavaScript对象：


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

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


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


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



您可以将此表单与样式一起使用：

HTML:


无冲突ID:（我正在尝试逐层选择并检查单击是否有效HMM似乎单击不起作用！我在单击（fu）中添加了
$（'#ptest'）.html（“单击重置”）


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



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



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

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



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



<form class="formReset"><form>



$('.formReset')[0].reset();