使用jQuery重置多阶段表单

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

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

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

TIA提供任何帮助.

1> Paolo Bergan..：

---

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

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

---

这里的问题是`.val('')`将所有值重置为'''`,即使这些值用于单选按钮和复选框.因此,当我运行上面的代码时,我会从表单中丢失有价值的信息,而不仅仅是用户输入的内容.

---

这个解决方案似乎有一个小问题 - 输入:电子邮件 - 它返回错误:错误:语法错误,无法识别的表达式:unsupported伪:电子邮件

---

那:输入很方便......现在我知道我会用.谢谢保罗:) +1

2> Titi Wangsa ..：

---

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

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

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

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

---

我想有34个人误解了这里的问题.提问者知道重置,表单将"重置"到他的脚本记住的值,并且他需要强制它们被清空.

---

谢谢,这是清除包含以下内容的表单的好方法:input type ="file".

3> leepowers..：

---

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

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

该.val('')行还将清除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');

---

$(':input,:select','#myFormId').removeAttr('checked').removeAttr('selected'); 应该管用

4> Francis Lewi..：

---

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

5> Cherian..：

---

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

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

6> 小智..：

---

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

---

如果你是jQuery的粉丝,可以改写为:$('frm')[0] .reset()

---

@dmitko只是看看海报的用户名

7> 小智..：

---

我经常这样做:

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

要么

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

8> alex..：

---

这是一些让您入门的东西

$('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选择器，也没有考虑仅删除选中的属性。

9> dmitko..：

---

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

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