使用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，但正如注释和其他答案中指出的那样，它将清除所有值属性中的radio/checkbox元素.

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部分，再加上form元素的缓存，这应该使它成为最佳性能的答案.

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屋！