使用 jQuery 重置多阶段表单 [英] Resetting a multi-stage form with jQuery

问题描述

我有一个带有标准重置按钮的表单，编码如下:

I have a form with a standard reset button coded thusly:

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

问题是，所述表单是多阶段的，所以如果用户填写了一个阶段 &然后稍后返回，当点击清除按钮时，各个字段的记住"值不会重置.

Trouble is, said form is of the multi-stage sort, so if a user fills out a stage & then returns later, the 'remembered' values for the various fields won't reset when the Clear button is clicked.

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

I'm thinking that attaching a jQuery function to loop over all the fields and clear them 'manually' would do the trick. I'm already using jQuery within the form, but am only just getting up to speed & so am not sure how to go about this, other than individually referencing each field by ID, which doesn't seem very efficient.

TIA 寻求帮助.

推荐答案

于 2012 年 3 月更新.

所以，在我最初回答这个问题两年后，我回来看到它几乎变成了一团糟.我觉得是时候回到它并让我的答案真正正确了，因为它是最受好评 + 接受的答案.

updated on March 2012.

So, two years after I originally answered this question I come back to see that it has pretty much turned into a big mess. I feel it's about time I come back to it and make my answer truly correct since it is the most upvoted + accepted.

为了记录，Titi 的答案是错误的，因为它不是原始海报所要求的 - 可以使用本机 reset() 方法重置表单是正确的，但是这个问题试图清除表单如果您以这种方式重置它，则会保留在表单中的记住值.这就是为什么要使用手册"的原因.需要重置.我认为大多数人最终都是从 Google 搜索中找到这个问题的，并且真正在寻找 reset() 方法，但它不适用于 OP 所谈论的特定情况.

For the record, Titi's answer is wrong as it is not what the original poster asked for - it is correct that it is possible to reset a form using the native reset() method, but this question is trying to clear a form off of remembered values that would remain in the form if you reset it this way. This is why a "manual" reset is needed. I assume most people ended up in this question from a Google search and are truly looking for the reset() method, but it does not work for the specific case the OP is talking about.

我的原始回答是这样的:

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

这可能适用于很多情况，包括 OP，但正如评论和其他答案中所指出的那样，将从任何值属性中清除单选/复选框元素.

Which might work for a lot of cases, including for the OP, but as pointed out in the comments and in other answers, will clear radio/checkbox elements from any value attributes.

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

A more correct answer (but not perfect) is:

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 部分，加上表单元素的缓存，这应该使它成为这里表现最好的答案.

Using the :text, :radio, etc. selectors by themselves is considered bad practice by jQuery as they end up evaluating to *:text which makes it take much longer than it should. I do prefer the whitelist approach and wish I had used it in my original answer. Anyhow, by specifying the input part of the selector, plus the cache of the form element, this should make it the best performing answer here.

如果人们对 select 元素的默认设置不是一个具有空白值的选项，那么这个答案可能仍然有一些缺陷，但它肯定是通用的，因为它会得到，这需要逐个处理-案例基础.

This answer might still have some flaws if people's default for select elements is not an option that has a blank value, but it is certainly as generic as it is going to get and this would need to be handled on a case-by-case basis.

这篇关于使用 jQuery 重置多阶段表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！