使用 jQuery 重置多阶段表单

Posted 2023-05-07

技术标签:

【中文标题】使用 jQuery 重置多阶段表单【英文标题】：Resetting a multi-stage form with jQuery 【发布时间】：2010-10-15 09:07:17 【问题描述】：

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

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

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

我认为附加一个 jQuery 函数来循环遍历所有字段并“手动”清除它们就可以了。我已经在表单中使用了 jQuery，但我只是在加快速度，所以我不知道该怎么做，除了按 ID 单独引用每个字段，这似乎效率不高。

TIA 寻求帮助。

【问题讨论】：

@da5id: 需要记住的是，我接受的内容也在清空隐藏元素！你可能不想要这个，所以如果你的表单有任何隐藏的输入，只需将 :hidden 添加到not()。谢谢保罗，非常好的一点我会记住的。对于任何寻求好的答案的人，请小心。接受的答案在正确的轨道上，但有错误。截至目前投票最多的答案不理解这个问题。许多其他答案也误解并混淆了 reset 和 blank/clear。 Mystkine 是对的 - 问题和当前接受的答案都将 clearing 与 resetting 混为一谈 - 我认为提问者确实在寻找多阶段形式重置解决方案，尽管原来的标题 - 我已经相应地更新了标题。 hep hep，尽管这个问题的年代久远，但我已经添加了一个新答案，实际上重置了表单的任意部分...***.com/questions/680241/… 【参考方案1】：

于 2012 年 3 月更新。

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

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

我的原始答案是这样的：

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

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

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

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 部分，加上表单元素的缓存，这应该使它成为这里表现最好的答案。

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

【讨论】：

那个 :input 很方便......现在我知道我会用了。谢谢保罗 :) +1 非常好，干杯，但这也会清除我按钮的值吗？稍后才能测试。在这一点上，我认为最好只列出你想要清空的那些，所以不要在第一行中使用 :input ":text, :select, :radio, :checkbox" 这里的一个问题是.val('') 将所有值重置为''，即使这些值用于单选按钮和复选框。因此，当我运行上述代码时，我会从表单中丢失有价值的信息，而不仅仅是用户输入的信息。这个解决方案似乎有一个小问题 - 输入：电子邮件 - 它返回一个错误：错误：语法错误，无法识别的表达式：不支持的伪：电子邮件【参考方案2】：

只需这样做

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

更多信息

如果您有这样的输入，设置 myinput.val('') 可能无法模拟“重置”100%：

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

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

【讨论】：

谢谢，这是清除包含以下内容的表单的好方法：input type="file"。我认为有 34 人误解了这里的问题。提问者知道重置，表单将“重置”为他的脚本正在记住的值，他需要强制它们被清空。这比这里的所有替代方案都好用【参考方案3】：

Paolo 接受的答案存在很大问题。考虑：

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

【讨论】：

由于某种原因，这对select 元素不起作用。你能解决这个问题吗？ $(':input,:select', '#myFormId').removeAttr('checked').removeAttr('selected');应该工作这是正确答案。如果您使用已接受的答案，则表单在您提交后会清除。但是，如果您想再次提交表单，则不会捕获任何复选框或单选按钮数据，因为您的值属性将被删除。我已经更新了我的答案来解决所有这些问题，除了 jQuery 强烈反对在不指定 input 部分的情况下单独使用 :text、:password 等选择器这一事实之外，你的答案大部分是正确的, 否则它的计算结果为 *:text，它会遍历文档中的 每个元素，而不仅仅是带有 input:text 的 <input> 标签 @paolo-bergantino 您的批评不正确。我的示例是使用作为$() 的第二个参数传递的#myFormId 上下文来检查要检查的元素 - 即$(':input', '#context') - 这与$('#context').filter(':input') 相同【参考方案4】：

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

【讨论】：

这个答案是最好的 IMO。它还应该包括.prop("checked", false)吗？ ***.com/questions/5874652/prop-vs-attr【参考方案5】：

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

建议您使用jQuery form plugin 并使用其clearForm or resetForm 功能。它可以处理大多数极端情况。

【讨论】：

$('#form_id').clearForm();正是我所需要的——谢谢！ “清除表单元素。此方法清空所有文本输入、密码输入和 textarea 元素，清除任何选择元素中的选择，并取消选中所有单选和复选框输入。” （另一方面，resetForm，“通过调用表单元素的本机 DOM 方法将表单重置为其原始状态。”）【参考方案6】：

我通常这样做：

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

或

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

【讨论】：

这样的旧帖子...我已经尝试了所有帖子中的所有内容...唯一有效的是您的第一行代码:(【参考方案7】：

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

【讨论】：

如果你是 jQuery 的粉丝，这可以重写为：$('frm')[0].reset() @dmitko 看看发帖人的用户名虽然这是重置表单的一个很好的解决方案，但它实际上并不是所提出问题的解决方案。【参考方案8】：

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

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

【讨论】：

【参考方案9】：

考虑使用validation plugin - 很棒！重置表格很简单：

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

【讨论】：

【参考方案10】：

我觉得这很好用。

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

【讨论】：

除了它不适用于复选框、单选按钮和选择。【参考方案11】：

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

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

文本字段的默认值默认检查复选框和单选按钮 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/

【讨论】：

【参考方案12】：

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

在常规 JavaScript 中，这很简单：

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

我尽量记住，虽然我们使用 jQuery 来增强和加速我们的编码，但有时它实际上并没有更快。在这些情况下，通常最好使用其他方法。

【讨论】：

【参考方案13】：

我对@987654321@ 做了些许改动。他的解决方案没有做的是将下拉选择设置为空白。（我认为当大多数人想要“清除”时，他们可能希望将所有值都设为空。）这个使用.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;
;

【讨论】：

【参考方案14】：

只需像这样使用jQuery Trigger event：

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

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

【讨论】：

【参考方案15】：

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

【讨论】：

你为什么要回复一个已经回复并批准超过 2 年的帖子？包括这个，你的帖子质量也很差这比直接调用 form.reset() 更加晦涩难懂。不需要这种 hack。【参考方案16】：

修改$(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();
);

【讨论】：

【参考方案17】：

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

【讨论】：

【参考方案18】：

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

【讨论】：

【参考方案19】：

我使用了下面的解决方案，它对我有用（将传统的 javascript 与 jQuery 混合）

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

【讨论】：

【参考方案20】：

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

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

【讨论】：

【参考方案21】：

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

【讨论】：

【参考方案22】：

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

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

希望这会有所帮助！ A.

【讨论】：

【参考方案23】：

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

【讨论】：

【参考方案24】：

这里刷新复选框和选择：

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

【讨论】：

【参考方案25】：

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

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

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

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

【讨论】：

【参考方案26】：

Paolo 的回答没有考虑到日期选择器，请添加以下内容：

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

【讨论】：

【参考方案27】：

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

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

【讨论】：

【参考方案28】：

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

【讨论】：

您应该将break 移动到checkbox 和radio 案例的下方。在当前位置不需要它。【参考方案29】：

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

【讨论】：

【参考方案30】：

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

【讨论】：

以上是关于使用 jQuery 重置多阶段表单的主要内容，如果未能解决你的问题，请参考以下文章

jquery重置表单

如何使用jquery重置表单中的多个选择框？

如何使用带有 .reset() 方法的 jQuery 重置表单

如何使用 jQuery 选择的插件重置表单？

如何使用 JQuery 重置单个输入元素

jsp中表单重置