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

小开

http://jsfiddle.net/8zLLn/ < a href = " http://jsfiddle.net/8zLLn/ " > < / >

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

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

所以，上面提到的问题都不是问题。也许你的身份证有问题?点击是否实际执行?

编辑:(因为我是一个没有适当评论能力的悲伤的人)这不是你的代码直接的问题。当你把它从你当前使用的页面的上下文中取出时，它工作得很好，所以，而不是用特定的jQuery/javascript &带属性的表单数据，必须是别的东西。我开始把它周围的代码分成两半，试着找出它在哪里运行。我的意思是，为了“确定”，我想你可以……

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

在点击功能，并确保它的目标是正确的形式…

如果是的话，一定是这里没有列出的东西。

你可以尝试的一件事(如果它没有正确地瞄准它)是使用输入:“重置”而不是你正在使用的…此外，我建议，因为它不是目标，不正确的工作，以找出实际点击的目标是什么。只要打开firebug/开发者工具，随便扔进去

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

看看会出现什么。然后我们可以从这里开始。

小开

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

小开

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

<input type="reset">

做完了。但如果你真的必须使用脚本，请注意每个表单控件都有一个形式属性，引用它所在的表单，所以你可以这样做:

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

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

小开

最佳答案

我终于解决问题了!! @RobG对form标签和table标签的看法是正确的。form标签应该放在表的外面。 with that，

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

工作不需要jquery或其他任何东西。简单点击按钮，tadaa~整个表单重置;)精彩!

小开

你可以像这样用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>

小开

根据这个帖子在这里, 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() 参考链接

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

小开

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

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

小开

通过jquery函数.closest(元素)和(…)。

获取父元素并查找孩子. xml。

最后，做所需的函数。

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

小开

这是用普通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 reset函数可以快速重置表单字段。

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

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

小开

第一行将重置表单输入

$('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>
}

然后清空表单:

    $('.btn:reset').click(function (ev) {
ev.preventDefault();
$(this).closest('form').find("input").each(function(i, v) {
$(this).val("");
});
});

小开

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

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


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

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

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