我有一个标准的重置按钮的形式编码如下:
<input type="reset" class="button standard" value="Clear" />
问题是,所述表单是多阶段排序的,所以如果用户填写了一个阶段,然后稍后返回,当单击Clear按钮时,各个字段的“记住”值不会重置。
我在想,附加一个jQuery函数循环所有的字段和清除他们'手动'将做的技巧。我已经在使用jQuery的形式,但我只是刚刚赶上速度&所以我不知道如何做到这一点,除了单独引用每个字段的ID,这似乎不是很有效。
请TIA帮忙。
我也有同样的问题,保罗的职位帮助了我,但我需要调整一件事。我使用id advancedindexsearch的表单只包含输入字段,并从会话中获取值。出于某种原因,下面这些方法对我来说并不管用:
$("#advancedindexsearch").find("input:text").val("");
如果我在这之后放了一个警告,我看到了正确删除的值,但之后它们又被替换了。我仍然不知道为什么,但下面这句话确实对我起了作用:
$("#advancedindexsearch").find("input:text").attr("value","");
对paolo的答案进行了轻微的更新,以适应新的输入类型,如“tel”和电子邮件,以下代码片段也将选择这些类型:
function resetForm(form) {
form.find('input:text, input[type=email], input[type=tel], input:password, input:file, select, textarea').val('');
form.find('input:radio, input:checkbox')
.removeAttr('checked').removeAttr('selected');
}
基本上,提供的解决方案没有一个能让我满意。
正如一些人指出的那样,他们会清空表单,而不是重新设置。
然而,有一些javascript属性可以帮助你:
文本字段的defaultValue
defaultChecked用于复选框和单选按钮
defaultSelected用于选择选项
它们存储页面加载时字段的值。
写一个jQuery插件现在是微不足道的:
(对于没有耐心的人来说……这是一个演示http://jsfiddle.net/kritzikratzi/N8fEF/1/)
插件代码
(function( $ ){
$.fn.resetValue = function() {
return this.each(function() {
var $this = $(this);
var node = this.nodeName.toLowerCase();
var type = $this.attr( "type" );
if( node == "input" && ( type == "text" || type == "password" ) ){
this.value = this.defaultValue;
}
else if( node == "input" && ( type == "radio" || type == "checkbox" ) ){
this.checked = this.defaultChecked;
}
else if( node == "input" && ( type == "button" || type == "submit" || type="reset" ) ){
// we really don't care
}
else if( node == "select" ){
this.selectedIndex = $this.find( "option" ).filter( function(){
return this.defaultSelected == true;
} ).index();
}
else if( node == "textarea" ){
this.value = this.defaultValue;
}
// not good... unknown element, guess around
else if( this.hasOwnProperty( "defaultValue" ) ){
this.value = this.defaultValue;
}
else{
// panic! must be some html5 crazyness
}
});
}
} )(jQuery);
使用
// reset a bunch of fields
$( "#input1, #input2, #select1" ).resetValue();
// reset a group of radio buttons
$( "input[name=myRadioGroup]" ).resetValue();
// reset all fields in a certain container
$( "#someContainer :input" ).resetValue();
// reset all fields
$( ":input" ).resetValue();
// note that resetting all fields is better with the javascript-builtin command:
$( "#myForm" ).get(0).reset();
一些笔记……
我还没有研究新的html5表单元素,有些元素可能需要特殊处理,但同样的想法应该可以工作。
元素需要直接引用。例如$("#container"). resetvalue()将不起作用。总是使用$("#container:input")代替。
如上所述,这里是一个演示:http://jsfiddle.net/kritzikratzi/N8fEF/1/