使用jQuery重置多阶段表单

我有一个带有标准重置按钮的表格，其代码如下：

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

麻烦的是，该表单属于多阶段排序，因此，如果用户填写一个阶段然后稍后返回，则单击“清除”按钮时，各个字段的“已记住”值将不会重置。

我认为附加jQuery函数以遍历所有字段并“手动”清除它们将达到目的。我已经在表单中使用了jQuery，但只是起步较快，因此不知道如何执行此操作，除了通过ID分别引用每个字段外，这似乎不太有效。

TIA寻求任何帮助。

2012年3月更新。

所以，在我最初回答这个问题的两年后，我再次看到它已经变成了一个大混乱。我觉得是时候该回头了，让我的答案真正正确，因为它是最受好评+接受的。

根据记录，Titi的答案是错误的，因为它不是原始张贴者所要求的-可以使用本机reset（）方法重置表格是正确的，但是这个问题是试图清除已记住的表格如果以这种方式重设，将保留在表格中的值。这就是为什么需要“手动”重置的原因。我认为大多数人最终都从Google搜索中遇到了这个问题，并且确实在寻找reset（）方法，但是它不适用于OP所谈论的特定情况。

我的原始答案是这样的：

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

这可能适用于很多情况，包括OP，但正如注释和其他答案中指出的那样，它将清除所有值属性中的radio / checkbox元素。

一个更正确的答案（但不是完美的）是：

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元素的缓存，这将使其成为此处性能最佳的答案。

如果人们对select元素的默认设置不是具有空白值的选项，则此答案可能仍然存在一些缺陷，但是它肯定会像将要获得的一样通用，因此需要逐案处理。

来自http://groups.google.com/group/jquery-dev/msg/2e0b7435a864beea：

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

myinput.val('')如果您有这样的输入，则设置可能不会模拟100％的“重置”：

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

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

保罗接受的答案有一个大问题。考虑：

$(':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');

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();

清除表单有些棘手，但并不像看上去那样简单。

建议您使用jQuery表单插件，并使用其clearForm或resetForm 功能。它可以处理大多数情况。

document.getElementById（'frm'）。reset（）

我通常这样做：

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

要么

$('#formId').get(0).reset()

这是一些让您入门的东西

$('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的答案更为简洁。我的回答比较罗word，因为我不了解:input选择器，也没有考虑仅删除选中的属性。

考虑使用验证插件 -太好了！重置表单很简单：

var validator = $("#myform").validate();
validator.resetForm();

我发现这很好。

$(":input").not(":button, :submit, :reset, :hidden").each( function() {
    this.value = this.defaultValue;     
});

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

但是，有一些javascript属性可以帮助您：

• 文本字段的defaultValue
• default检查复选框和单选按钮
• 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/

您可能会发现，使用jQuery实际上更容易解决。

在常规JavaScript中，这很简单：

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

我试图永远记住，虽然我们使用jQuery增强并加快了编码速度，但有时实际上并没有更快。在这种情况下，通常最好使用其他方法。

我对弗朗西斯·刘易斯的解决方案做了些许改动。他的解决方案不起作用的是将下拉菜单选择为空白。（我认为，当大多数人都希望“清”，他们可能想使所有的值清空。）这一个做它.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;
};

我通常在表单中添加一个隐藏的重置按钮。仅在需要时：$（'＃reset'）。click（）;

修改投票情况的答案$(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();
});

只需使用jQuery Trigger eventlike即可：

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

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

这对我有用，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);

我正在使用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的投入。唯一的问题是表格中是否包含默认值。

我使用下面的解决方案，它为我工作（将传统javascript与jQuery混合使用）

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

我只是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--"; }

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

我在相当大的表单（50多个字段）上使用的一种方法是仅使用AJAX重新加载表单，基本上是回拨给服务器，并只返回包含其默认值的字段。这比尝试使用JS捕获每个字段然后将其设置为默认值要容易得多。这也使我可以将默认值放在一个位置，即服务器的代码。在此站点上，根据帐户的设置还存在一些不同的默认值，因此我不必担心将这些发送到JS。我必须处理的唯一小问题是在AJAX调用后需要初始化的一些建议字段，但没什么大不了的。

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

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

希望这可以帮助！一个。

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

这里带有复选框的刷新并选择：

$('#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');

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

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

如果在此之后发出警报，则会看到正确删除的值，但之后又再次替换了它们。我仍然不知道如何或为什么，但是以下几行确实帮了我大忙：

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

Paolo的答案未考虑日期选择器，请在以下内容中添加：

$form.find('input[type="date"]').val('');

我对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

另外，将保留输入的默认值。

这是我的解决方案，它也适用于新的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;
        }
    });
}

补充已接受的答案，如果您使用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();
    }

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