使用jQuery重置多阶段表单-Java 学习之路

342

我有一个带有标准复位按钮的表格，因此编码：

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

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

我认为附加一个jQuery函数来遍历所有字段并“手动”清除它们就可以了 . 我已经在表单中使用了jQuery，但我只是起步速度，所以我不知道如何解决这个问题，除了通过ID单独引用每个字段，这看起来效率不高 .

TIA提供任何帮助 .

30 回答

4
来自http://groups.google.com/group/jquery-dev/msg/2e0b7435a864beea：
```
$('#myform')[0].reset();
```
如果你有这样的输入，设置 myinput.val('') 可能无法模拟"reset" 100％：
```
<input name="percent" value="50"/>
```
例如，对默认值为50的输入调用 myinput.val('') 会将其设置为空字符串，而调用 myform.reset() 会将其重置为初始值50 .
回复于 2024-06-02T15:53:22+08:00

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

回复于 2024-06-02T15:53:22+08:00

4
于2012年3月更新 .

所以，在我最初回答这个问题两年后，我回过头来看它已经变成了一个大混乱 . 我觉得现在是时候回到它并让我的答案真正正确，因为它是最受欢迎的 .

为了记录，Titi的答案是错误的，因为它不是原始海报所要求的 - 使用原生重置（）方法重置表单是正确的，但这个问题是试图清除记住的表格如果以这种方式重置它将保留在表单中的值 . 这就是需要“手动”复位的原因 . 我假设大多数人都是从谷歌搜索结束这个问题，并且真正寻找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 部分加上表单元素的缓存，这应该使它成为表现最佳的答案 .

如果人们对选择元素的默认值不是具有空白值的选项，那么这个答案可能仍然存在一些缺陷，但它肯定是通用的，因为它需要根据具体情况进行处理 . .
回复于 2024-06-02T15:53:22+08:00
0
只需使用 jQuery Trigger event 就像这样：
```
$('form').trigger("reset");
```
这将重置复选框，单选按钮，文本框等...基本上它会将您的表单转换为默认状态 . 只需将 #ID, Class, element 放在 jQuery 选择器中即可 .
回复于 2024-06-02T15:53:22+08:00

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="" />

糟糕 - 我正在使用那个 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');

回复于 2024-06-02T15:53:22+08:00

jQuery Plugin

我创建了一个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();

回复于 2024-06-02T15:53:22+08:00

0

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

建议您使用jQuery form plugin并使用其clearForm or resetForm功能 . 它负责大多数角落案件 .

回复于 2024-06-02T15:53:22+08:00
492

的document.getElementById（ 'FRM'） . 复位（）

回复于 2024-06-02T15:53:22+08:00

我经常这样做：

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

要么

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

回复于 2024-06-02T15:53:22+08:00

5
考虑使用validation plugin - 太棒了！重置表单很简单：
```
var validator = $("#myform").validate();
validator.resetForm();
```
回复于 2024-06-02T15:53:22+08:00
48
这是让你入门的东西
```
$('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});

edit Paolo's answer更简洁 . 我的回答更加冗长，因为我不知道 :input 选择器，也没想过简单地删除checked属性 .
回复于 2024-06-02T15:53:22+08:00

我发现这很有效 .

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

回复于 2024-06-02T15:53:22+08:00

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

但是，有一些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/

回复于 2024-06-02T15:53:22+08:00

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

在常规JavaScript中，这很简单：
```
document.getElementById('frmitem').reset();
```
我总是记得，虽然我们使用jQuery来增强和加速编码，但有时它实际上并不快 . 在这些情况下，使用其他方法通常会更好 .
回复于 2024-06-02T15:53:22+08:00

我做了Francis Lewis' nice solution的略微变化 . 他的解决方案没有做的是将下拉选项设置为空白 . （我想当大多数人想要"clear"时，他们可能想让所有值都为空 . ）这个用 .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;
};

回复于 2024-06-02T15:53:22+08:00

4

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

回复于 2024-06-02T15:53:22+08:00

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

回复于 2024-06-02T15:53:22+08:00

2
我正在使用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的意见 . 唯一的问题是如果我在表单中有默认值 .
回复于 2024-06-02T15:53:22+08:00

我使用下面的解决方案，它适用于我（混合传统的JavaScript与jQuery）

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

回复于 2024-06-02T15:53:22+08:00

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--"; }
```
您只需将值重新定义为默认值即可 .
回复于 2024-06-02T15:53:22+08:00
0

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

回复于 2024-06-02T15:53:22+08:00
14
所有这些答案都很好，但绝对最简单的方法是使用虚假重置，即使用链接和重置按钮 .

只需添加一些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" />
```
希望这可以帮助！一个 .
回复于 2024-06-02T15:53:22+08:00

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

回复于 2024-06-02T15:53:22+08:00

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

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

回复于 2024-06-02T15:53:22+08:00

15
我遇到了同样的问题，Paolo的帖子帮助了我，但我需要调整一件事 . 我的带有advanced advancedindexsearch的表单只包含输入字段并从会话中获取值 . 出于某种原因，以下内容对我不起作用：
```
$("#advancedindexsearch").find("input:text").val("");
```
如果我在此之后发出警报，我会看到正确删除的值，但之后它们会再次被替换 . 我仍然不知道如何或为什么，但以下行确实为我做了诀窍：
```
$("#advancedindexsearch").find("input:text").attr("value","");
```
回复于 2024-06-02T15:53:22+08:00
0
Paolo的答案没有考虑日期选择器，将其添加到：
```
$form.find('input[type="date"]').val('');
```
回复于 2024-06-02T15:53:22+08:00

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

另外，保留输入的默认值 .

回复于 2024-06-02T15:53:22+08:00

390

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

回复于 2024-06-02T15:53:22+08:00

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

回复于 2024-06-02T15:53:22+08:00

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

回复于 2024-06-02T15:53:22+08:00

使用jQuery重置多阶段表单

30 回答

于2012年3月更新 .

插件代码

用法

一些笔记......

相关问题