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

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

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

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

请TIA帮忙。


当前回答

这里刷新了复选框和选择:

$('#frm').find('input:text, input:password, input:file, textarea').val('');
$('#frm').find('input:radio, input:checkbox').attr("checked",false).checkboxradio("refresh");
$('#frm').find('select').val('').selectmenu('refresh');

其他回答

所有这些答案都很好,但最简单的方法是使用虚假重置,即使用链接和重置按钮。

只需添加一些CSS来隐藏你真正的重置按钮。

input[type=reset] { visibility:hidden; height:0; padding:0;}

然后在你的链接上添加如下内容

<a href="javascript:{}" onclick="reset.click()">Reset form</a>

<input type="reset" name="reset" id="reset" /><!--This input button is hidden-->

希望这能有所帮助! 一个。

我用的是Paolo Bergantino的解决方案,它很棒,但做了一些调整……特别是使用表单名称代替id。

例如:

function jqResetForm(form){
   $(':input','form[name='+form+']')
   .not(':button, :submit, :reset, :hidden')
   .val('')
   .removeAttr('checked')
   .removeAttr('selected');
}

现在当我想用它的时候

<span class="button" onclick="jqResetForm('formName')">Reset</span>

如你所见,这适用于任何表单,因为我使用css样式来创建按钮,页面在单击时不会刷新。再次感谢Paolo的建议。唯一的问题是,如果我在表单中有默认值。

修改$(document).ready()情况投票最多的答案:

$('button[type="reset"]').click(function(e) {
    $form = $(this.form);
    $form.find('input:text, input:password, input:file, select, textarea').val('');
    $form.find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected');
    e.preventDefault();
});

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

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

我也有同样的问题,保罗的职位帮助了我,但我需要调整一件事。我使用id advancedindexsearch的表单只包含输入字段,并从会话中获取值。出于某种原因,下面这些方法对我来说并不管用:

$("#advancedindexsearch").find("input:text").val("");

如果我在这之后放了一个警告,我看到了正确删除的值,但之后它们又被替换了。我仍然不知道为什么,但下面这句话确实对我起了作用:

$("#advancedindexsearch").find("input:text").attr("value","");