我有一个标准的重置按钮的形式编码如下:

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

问题是,所述表单是多阶段排序的,所以如果用户填写了一个阶段,然后稍后返回,当单击Clear按钮时,各个字段的“记住”值不会重置。

我在想,附加一个jQuery函数循环所有的字段和清除他们'手动'将做的技巧。我已经在使用jQuery的形式,但我只是刚刚赶上速度&所以我不知道如何做到这一点,除了单独引用每个字段的ID,这似乎不是很有效。

请TIA帮忙。


当前回答

$(this).closest('form').find('input,textarea,select').not(':image').prop('disabled', true);

其他回答

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

建议你使用jQuery表单插件,并使用它的clearForm或resetForm功能。 它能解决大部分的极端情况。

这里有一些东西可以让你开始

$('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的回答更加简洁。我的回答更啰嗦,因为我不知道:input选择器,也没有想过简单地删除选中的属性。

您可能会发现,没有jQuery实际上更容易解决这个问题。

在常规JavaScript中,这非常简单:

document.getElementById('frmitem').reset();

我总是试图记住,虽然我们使用jQuery来增强和加速我们的编码,但有时它实际上并没有更快。在这些情况下,使用另一种方法通常会更好。

我使用下面的解决方案,它为我工作(混合传统javascript和jQuery)

$("#myformId").submit(function() {
    comand="window.document."+$(this).attr('name')+".reset()";
    setTimeout("eval(comando)",4000);
})

基本上,提供的解决方案没有一个能让我满意。 正如一些人指出的那样,他们会清空表单,而不是重新设置。

然而,有一些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/