reset - jQuery 重置多级形式

  显示原文与译文双语对照的内容

我有一个带有标准重设按钮的表单,上面写着:


<input type="reset" class="button standard" value="Clear"/>

麻烦的是,形式是说multi-stage排序,所以如果一个用户填写一个舞台&然后返回后,各领域'已经记住'值不会当单击clear按钮复位。

我认为附加一个jquery函数来遍历所有字段和明确他们'手工'就可以做到。 我已经使用jquery内的形式,但是我刚刚起床速度&所以我不确定如何,其他比单独引用每个字段id,这似乎并不十分有效。

TIA用于任何帮助。

时间:

在 2012年03月 上更新。

所以,在我最初回答这个问题的两年后,我回到了我看到它已经变成了一个巨大的混乱。 我觉得是时候让我回到它的正确答案了,因为它是最 upvoted + 接受的。

对于记录,titi的回答是错误的,因为它不是原始的海报。使用原生 reset() 方法来重置表单是正确的,如果你用方法重新设置表单,那么这个问题就会消失。 这就是为什么需要"手工手册"复位的原因。 我认为大多数人最终在从谷歌搜索这个问题,真正寻找 reset() 方法,但它不工作的具体案例op是谈论。

我的原始答案是:


//not correct, use answer below
$(':input','#myform')
.not(':button, :submit, :reset, :hidden')
.val('')
.removeAttr('checked')
.removeAttr('selected');

这对于很多情况下都是可行的,包括 OP,但是在注释和其他答案中,将清除来自任何值属性的单选/复选框元素。

一个更高的正确的答案( 但不完美) 是:


function resetForm($form) {
 $form.find('input:text, input:password, input:file, select, textarea').val('');
 $form.find('input:radio, input:checkbox')
. removeAttr('checked').removeAttr('selected');
}

//to call, use:
resetForm($('#myform'));//by id, recommended
resetForm($('form[name=myName]'));//by name

使用 :text:radio 等等 jquery选择器本身被认为是不好的做法,他们最终评估 *:text 使得它比它应该花更长的时间。 我更喜欢白名单方法,希望我在原来的答案中使用它。 无论如何,通过指定选择器的input 部分,加上表单元素的缓存,这应该是在这里执行的最佳答案。

如果选择元素默认的人不是一个具有空白值的选项,这个答案可能仍然有一些缺陷,但它肯定是通用的,而且需要以个案的方式处理。

保罗回答有一个大问题。 请考虑:


$(':input','#myform')
. not(':button, :submit, :reset, :hidden')
. val('')
. removeAttr('checked')
. removeAttr('selected');

英镑的.val('') 行也将清除分配给复选框和单选按钮的任何 value 。 因此如果( 我像我) 执行如下操作:


<input type="checkbox" name="list[]" value="one"/>
<input type="checkbox" name="list[]" value="two" checked="checked"/>
<input type="checkbox" name="list[]" value="three"/>

使用接受的答案将把你的输入转换为:


<input type="checkbox" name="list[]" value=""/>
<input type="checkbox" name="list[]" value=""/>
<input type="checkbox" name="list[]" value=""/>

哎呀- 我在使用那个值 !

下面是一个修改的版本,它将保留你的复选框和单选值:


//Use a whitelist of fields to minimize unintended side effects.
$('INPUT:text, INPUT:password, INPUT:file, SELECT, TEXTAREA', '#myFormId').val(''); 
//De-select any checkboxes, radios and drop-down menus
$('INPUT:checkbox, INPUT:radio', '#myFormId').removeAttr('checked').removeAttr('selected');

清除表单有点棘手,不像看起来那么简单。

建议你使用jquery插件形式和使用其 clearForm或 resetForm 功能。 它负责大多数的边角情况。

的jQuery插件

我创建了一个jQuery插件,所以我可以在任何地方轻松使用它:


jQuery.fn.clear = function()
{
 var $form = $(this);

 $form.find('input:text, input:password, input:file, textarea').val('');
 $form.find('select option:selected').removeAttr('selected');
 $form.find('input:checkbox, input:radio').removeAttr('checked');

 return this;
}; 

现在我可以通过调用:


$('#my-form').clear();

考虑使用验证插件 web - 它很棒 ! reseting表单很简单:


var validator = $("#myform").validate();
validator.resetForm();

...