350

我有一个带有这样编码的标准重置按钮的表单:

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

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

我认为附加一个 jQuery 函数来遍历所有字段并“手动”清除它们就可以了。我已经在表单中使用了 jQuery,但我只是在加快速度,所以我不确定如何去做,除了通过 ID 单独引用每个字段,这似乎不是很有效。

TIA 寻求帮助。

4

30 回答 30

506

2012 年 3 月更新。

所以,在我最初回答这个问题两年后,我回来发现它几乎变成了一团糟。我觉得是时候回到它并让我的答案真正正确,因为它是最受支持和接受的。

作为记录,蒂蒂的回答是错误的,因为这不是原始发帖人所要求的 - 可以使用本机 reset() 方法重置表单是正确的,但这个问题试图清除已记住的表单如果您以这种方式重置它,这些值将保留在表单中。这就是需要“手动”重置的原因。我假设大多数人最终从谷歌搜索中找到了这个问题,并且真正在寻找 reset() 方法,但它不适用于 OP 正在谈论的特定情况。

原来的答案是这样的:

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

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

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

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

jQuery 认为单独使用:text,:radio等选择器是不好的做法,因为它们最终会评估*:textwhich 使得它花费的时间比预期的要长得多。我确实更喜欢白名单方法,并希望我在原始答案中使用过它。无论如何,通过指定input选择器的一部分,加上表单元素的缓存,这应该使它成为这里表现最好的答案。

如果人们对选择元素的默认值不是具有空白值的选项,则此答案可能仍然存在一些缺陷,但它肯定是通用的,这需要根据具体情况进行处理.

于 2009-03-25T04:46:47.500 回答
392

只需这样做

$('#myform')[0].reset();

更多信息

myinput.val('')如果您有这样的输入,设置可能不会模拟“重置”100%:

<input name="percent" value="50"/>

例如,调用myinput.val('')默认值为 50 的输入会将其设置为空字符串,而调用myform.reset()会将其重置为其初始值 50。

于 2009-06-10T06:25:56.063 回答
48

保罗接受的答案存在很大问题。考虑:

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

.val('')行还将清除任何value分配给复选框和单选按钮的 '。所以如果(像我一样)你做这样的事情:

<input type="checkbox" name="list[]" value="one" />
<input type="checkbox" name="list[]" value="two" checked="checked" />
<input type="checkbox" name="list[]" value="three" />

使用接受的答案会将您的输入转换为:

<input type="checkbox" name="list[]" value="" />
<input type="checkbox" name="list[]" value="" />
<input type="checkbox" name="list[]" value="" />

哎呀-我正在使用该值!

这是一个修改后的版本,它将保留您的复选框和单选值:

// Use a whitelist of fields to minimize unintended side effects.
$('INPUT:text, INPUT:password, INPUT:file, SELECT, TEXTAREA', '#myFormId').val('');  
// De-select any checkboxes, radios and drop-down menus
$('INPUT:checkbox, INPUT:radio', '#myFormId').removeAttr('checked').removeAttr('selected');
于 2010-09-10T03:44:11.940 回答
16

jQuery插件

我创建了一个 jQuery 插件,因此我可以在任何需要的地方轻松使用它:

jQuery.fn.clear = function()
{
    var $form = $(this);

    $form.find('input:text, input:password, input:file, textarea').val('');
    $form.find('select option:selected').removeAttr('selected');
    $form.find('input:checkbox, input:radio').removeAttr('checked');

    return this;
}; 

所以现在我可以通过调用来使用它:

$('#my-form').clear();
于 2011-07-22T06:07:34.910 回答
14

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

建议您使用jQuery 表单插件并使用其clearFormresetForm 功能。它可以处理大多数极端情况。

于 2009-03-25T05:03:26.510 回答
14

document.getElementById('frm').reset()

于 2009-05-28T14:11:50.507 回答
14

我通常这样做:

$('#formDiv form').get(0).reset()

或者

$('#formId').get(0).reset()
于 2010-04-27T20:08:45.423 回答
5

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

$('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选择器,也没有想过简单地删除选中的属性。

于 2009-03-25T04:48:13.690 回答
5

考虑使用验证插件- 很棒!重置表格很简单:

var validator = $("#myform").validate();
validator.resetForm();
于 2010-07-06T07:29:36.597 回答
4

我觉得这很好用。

$(":input").not(":button, :submit, :reset, :hidden").each( function() {
    this.value = this.defaultValue;     
});
于 2010-06-12T22:06:57.883 回答
4

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

在常规 JavaScript 中,这很简单:

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

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

于 2011-07-07T21:50:28.547 回答
4

基本上没有提供的解决方案让我高兴。正如一些人指出的那样,他们清空表格而不是重置表格。

但是,有一些 javascript 属性可以提供帮助:

  • 文本字段的默认值
  • 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/
于 2012-05-14T20:29:24.530 回答
4

我对弗朗西斯刘易斯的好解决方案做了一点改动。他的解决方案没有做的是将下拉选择设置为空白。(我认为当大多数人想要“清除”时,他们可能想让所有值都为空。)这个用.find('select').prop("selectedIndex", -1).

$.fn.clear = function()
{
    $(this).find('input')
            .filter(':text, :password, :file').val('')
            .end()
            .filter(':checkbox, :radio')
                .removeAttr('checked')
            .end()
        .end()
    .find('textarea').val('')
        .end()
    .find('select').prop("selectedIndex", -1)
        .find('option:selected').removeAttr('selected')
    ;
    return this;
};
于 2014-06-30T17:51:40.857 回答
4

简单地使用jQuery Trigger event这样的:

$('form').trigger("reset");

这将重置复选框、单选按钮、文本框等...本质上它会将您的表单转换为默认状态。只需将选择器放在#ID, Class, element里面jQuery

于 2015-06-20T04:47:36.090 回答
2

我通常会在表单中添加一个隐藏的重置按钮。仅在需要时: $('#reset').click();

于 2011-10-10T16:27:43.693 回答
2

针对情况修改投票最多的答案$(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();
});
于 2012-09-15T00:19:30.287 回答
1

这对我有用,pyrotex 答案没有重置选择字段,把他的,这里是我的编辑:

// Use a whitelist of fields to minimize unintended side effects.
$(':text, :password, :file', '#myFormId').val('');  
// De-select any checkboxes, radios and drop-down menus
$(':input,select option', '#myFormId').removeAttr('checked').removeAttr('selected');
//this is for selecting the first entry of the select
$('select option:first', '#myFormId').attr('selected',true);
于 2011-02-15T22:43:01.143 回答
1

我正在使用 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 的意见。唯一的问题是我是否在表单中有默认值。

于 2011-10-13T16:06:37.770 回答
1

我使用了下面的解决方案,它对我有用(将传统的 javascript 与 jQuery 混合)

$("#myformId").submit(function() {
    comand="window.document."+$(this).attr('name')+".reset()";
    setTimeout("eval(comando)",4000);
})
于 2011-10-28T18:53:51.010 回答
1

我只是 PHP 的中级,有点懒得去钻研 JQuery 之类的新语言,但是下面这不是一个简单而优雅的解决方案吗?

<input name="Submit1" type="submit" value="Get free quote" />
<input name="submitreset" type="submit" value="Reset" />

看不到为什么没有两个提交按钮的原因,只是用途不同。然后简单地说:

if ($_POST['submitreset']=="Reset") {
$_source = "--Choose language from--";
$_target = "--Choose language to--"; }

您只需将您的值重新定义回默认值即可。

于 2012-08-29T05:22:00.010 回答
0

我在一个相当大的表单(50 多个字段)上使用的一种方法是使用 AJAX 重新加载表单,基本上是调用服务器并返回具有默认值的字段。这比尝试使用 JS 抓取每个字段然后将其设置为默认值要容易得多。它还允许我将默认值保存在一个地方——服务器的代码。在这个站点上,根据帐户的设置,还有一些不同的默认值,因此我不必担心将这些发送给 JS。我必须处理的唯一小问题是一些在 AJAX 调用后需要初始化的建议字段,但没什么大不了的。

于 2009-03-25T05:12:05.130 回答
0

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

只需添加一些 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-->

希望这可以帮助!一种。

于 2011-09-24T17:45:14.603 回答
0
<script type="text/javascript">
$("#edit_name").val('default value');
$("#edit_url").val('default value');
$("#edit_priority").val('default value');
$("#edit_description").val('default value');
$("#edit_icon_url option:selected").removeAttr("selected");
</script>
于 2012-04-05T05:46:35.913 回答
0

此处刷新复选框并选择:

$('#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');
于 2012-12-19T19:29:53.540 回答
0

我遇到了同样的问题,Paolo 的帖子帮助了我,但我需要调整一件事。我的 id 为 advancedindexsearch 的表单仅包含输入字段并从会话中获取值。由于某种原因,以下内容对我不起作用:

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

如果我在此之后发出警报,我会看到正确删除的值,但之后它们又被替换了。我仍然不知道如何或为什么,但以下行确实对我有用:

$("#advancedindexsearch").find("input:text").attr("value","");
于 2013-02-08T09:36:00.877 回答
0

Paolo 的回答没有考虑日期选择器,请将其添加到:

$form.find('input[type="date"]').val('');
于 2013-12-10T05:12:19.050 回答
0

我对 Paolo Bergantino 的原始答案做了一点改进

function resetFormInputs(context) {
    jQuery(':input', context)
    .removeAttr('checked')
    .removeAttr('selected')
    .not(':button, :submit, :reset, :hidden')
    .each(function(){
         jQuery(this).val(jQuery(this).prop('defautValue'));
    });
}

这样,我可以将任何上下文元素传递给函数。我可以重置整个表单或仅重置一组字段,例如:

resetFormInputs('#form-id'); // entire form
resetFormInputs('.personal-info'); // only the personal info field set

另外,保留输入的默认值。

于 2014-06-16T20:28:55.357 回答
0

这是我的解决方案,它也适用于新的 html5 输入类型:

/**
 * removes all value attributes from input/textarea/select-fields the element with the given css-selector
 * @param {string} ele css-selector of the element | #form_5
 */
function clear_form_elements(ele) {
    $(ele).find(':input').each(function() {
        switch (this.type) {
            case 'checkbox':
            case 'radio':
                this.checked = false;
            default:
                $(this).val('');
                break;
        }
    });
}
于 2014-08-26T21:30:08.210 回答
0

作为接受的答案的补充,如果您使用 SELECT2 插件,则需要调用 select2 脚本来更改所有 select2 字段:

function resetForm(formId){
        $('#'+formId).find('input:text, input:password, input:file, select, select2, textarea').val('');
        $('#'+formId).find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected');
        $('.select2').select2();
    }
于 2018-10-22T00:13:48.453 回答
-1
$(this).closest('form').find('input,textarea,select').not(':image').prop('disabled', true);
于 2013-12-24T12:58:03.073 回答