使用jQuery重置多阶段表单

Question

我有一个带有标准复位按钮的表格,因此编码:

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

麻烦的是,表示表单属于多阶段排序,因此如果用户填写一个阶段然后稍后返回,则单击"清除"按钮时,不会重置各个字段的"记住"值.

我认为附加一个jQuery函数来遍历所有字段并"手动"清除它们就可以了.我已经在表单中使用了jQuery,但我只是起步速度,所以我不知道如何解决这个问题,除了通过ID单独引用每个字段,这看起来效率不高.

TIA提供任何帮助.

Answer 1

2012年3月更新.

所以,在我最初回答这个问题两年后,我回过头来看它已经变成了一个大混乱.我觉得这是时候我回到它并让我的答案真正正确,因为它是最受欢迎的+接受.

为了记录,Titi的答案是错误的,因为它不是原始海报所要求的 - 使用原生重置()方法重置表单是正确的,但这个问题是试图清除记住的表格如果以这种方式重置它将保留在表单中的值.这就是需要"手动"复位的原因.我假设大多数人都是从谷歌搜索结束这个问题,并且真正寻找reset()方法,但它不适用于OP所讨论的特定情况.

我原来的答案是这样的:

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

这可能适用于很多情况,包括OP,但正如评论和其他答案中所指出的,将清除任何值属性中的radio/checkbox元素.

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

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选择器的一部分,加上表单元素的缓存,这应该使它成为表现最佳的答案.

如果人们对选择元素的默认值不是具有空白值的选项,那么这个答案可能仍然存在一些缺陷,但它肯定是通用的,因为它需要根据具体情况进行处理. .

Answer 2

来自http://groups.google.com/group/jquery-dev/msg/2e0b7435a864beea:

$('#myform')[0].reset();

myinput.val('')如果您有这样的输入,设置可能无法模拟"重置"100%:

<input name="percent" value="50"/>

例如,调用myinput.val('')默认值为50的输入会将其设置为空字符串,而调用myform.reset()会将其重置为初始值50.

Answer 3

Paolo接受的答案存在很大问题.考虑:

$(':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');

Answer 4

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();

Answer 5

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

建议你使用jQuery表单插件并使用其clearForm或resetForm 功能.它负责大多数角落案件.

Answer 6

的document.getElementById( 'FRM').复位()

Answer 7

我经常这样做:

$('#formDiv form').get(0).reset()

要么

$('#formId').get(0).reset()

Answer 8

这是一些让您入门的东西

$('form') // match your correct form 
.find('input[type!=submit], input[type!=reset]') // don't reset submit or reset
.val(''); // set their value to blank

当然，如果您有复选框/单选按钮，则需要对其进行修改以同时包含它们并进行设置 .attr({'checked': false});

编辑 Paolo的答案更为简洁。我的回答比较罗word，因为我不了解:input选择器，也没有考虑仅删除选中的属性。

Answer 9

考虑使用验证插件 - 它太棒了!重置表单很简单:

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