使用jQuery清除表单字段


402

我想清除表单中的所有输入和textarea字段。在reset类中使用输入按钮时,其工作原理如下:

$(".reset").bind("click", function() {
  $("input[type=text], textarea").val("");
});

这将清除页面上的所有字段,而不仅仅是表单中的字段。对于实际的重置按钮所处的形式,我的选择器将如何显示?



2
重置表单的更详细方法在这里
2013年

Answers:


487
$(".reset").click(function() {
    $(this).closest('form').find("input[type=text], textarea").val("");
});

49
不要忘记你的input[type=password]领域。
SammyK,2013年

64
该答案涵盖了原始问题。那些不仅仅是文本字段的人显然需要根据需要添加代码...
ShaneBlake

2
还请记住,HTML5中除了type = password(如SammyK所说)以外,会有更多类型的输入:type = url,type = digits,type = email等,http://www.w3.org/TR/html5/forms .html#states-of-the-type-attribute
Gabriel

6
一个小提示:该选择器不会选择依赖隐式type = text的输入元素,您必须在标记中显式包括type = text。这也许很明显,但是对我而言不是:-)
Elbin

2
@CaptSaltyJack:这会将它们重置为默认值,这与清除它们不是一回事……
ShaneBlake

628

对于jQuery 1.6+

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

对于jQuery <1.6

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

请参阅这篇文章: 使用jQuery重置多阶段表单

要么

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

正如jQuery所建议的

检索和更改DOM属性,如checkedselecteddisabled元素形式的元素状态,使用.prop()方法。


3
第一部分代码将复选框的值设置为“”,而不仅仅是取消选中它们。它不会影响选择,因为它是被选择的选项标签。

6
为了避免删除复选框值,我根据您的回答使用了以下内容:$(':input').not(':button, :submit, :reset, :hidden').removeAttr('checked').removeAttr('selected').not(':checkbox, select').val('').removeAttr('value');。它将删除默认值(即value="something",但不适用于复选框或选择项。)
Jeppe Mariager-Lam 2013年

17
如果您有收音机,复选框或选择框,请不要使用此选项(选项1),它们的值消失后,您将浪费大量时间查找奇怪的错误。正确的版本,其值保持不变:($(':input').not(':button, :submit, :reset, :hidden').removeAttr('checked').removeAttr('selected').not(':checkbox, :radio, select').val('');基于Jeppe Mariager-Lam的评论)
Konstantin Pereiaslov

8
有什么理由避免第二种选择?
rineez 2014年

6
您的第二个解决方案是实际的答案
Abzarak 2015年

159

有什么理由不应该使用?

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

17
@ pythonian29033:使用您的方法,您将把页面上的所有表单重置为默认值……这绝对不是普通开发人员想要的。我认为jQuery开发人员应注意以下事实:他/她需要将选择器从示例代码更改为适当的代码...
Sk8erPeter 2014年

8
@ Sk8erPeter如果页面上有多个ID为的元素,则说明form您做错了。如果选择器正确,那将是正确的form,但它是ID选择器#form
brandones

@brandones:您应该注意所答复的内容,因为您错了... :)检查pythonian29033编写的代码(我在较早时答复过):$("form").trigger('reset');确实触发所有<form>元素上的“重置”事件。在大多数情况下,这可能是错误的。但是$("#form").trigger('reset');(显示在原始答案中)仅在设置了“表单” ID(可通过#form选择器访问)的元素上触发“重置”事件。是的,一个id只能使用一次,这就是为什么他们将其称为“ id”,因为它明确地标识了一个元素。
Sk8erPeter '16

61

这将无法处理表单输入字段具有非空默认值的情况。

像应该工作

$('yourdiv').find('form')[0].reset();

我刚从第一篇博文中获取了js代码,并希望它在每种页面上都能以几种形式的几个重置按钮运行。因此,只是选择器需要一些贡献。
tbuehlmann 2011年

51

如果使用选择器并将值设置为空值,则不会重置表单,而是将所有字段都设置为空。从服务器端加载表单后,Reset是按照用户进行任何编辑操作之前的形式进行表单创建。如果输入名称为“ username”,并且该用户名是从服务器端预填充的,则此页面上的大多数解决方案都会从输入中删除该值,而不是将其重置为更改用户之前的值。如果您需要重置表单,请使用以下命令:

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

如果您不需要重置表单,而是在所有输入中填充某个值(例如空值),则可以使用其他注释中的大多数解决方案。


29

简单,但就像魅力。

$("#form").trigger('reset'); //jquery
document.getElementById("myform").reset(); //native JS

14
除非它不会清除字段。它将它们设置为默认值。
Mark Fraser 2014年

28

如果有人仍在阅读此线程,这是不是使用jQuery,而是使用普通JavaScript的最简单解决方案。如果您的输入字段在表单内,则有一个简单的JavaScript reset命令:

document.getElementById("myform").reset();

有关此的更多信息: http //www.w3schools.com/jsref/met_form_reset.asp

干杯!


正如它所说。它将重置为初始形式的值,并且不清空这些值。但是可以,如果您使用默认值加载表单,则不会清除它们。可能是一个遍历所有输入并清除它们的JS循环
Tarmo Saluste 2014年


17

为什么完全需要使用任何JavaScript来完成?

<form>
    <!-- snip -->
    <input type="reset" value="Reset"/>
</form>

http://www.w3.org/TR/html5/the-input-element.html#attr-input-type-keywords


首先尝试过,它不会清除具有默认值的字段。

这是使用jQuery的一种方法,然后:

$('.reset').on('click', function() {
    $(this).closest('form').find('input[type=text], textarea').val('');
});

1
首先尝试过,它不会清除具有默认值的字段。
tbuehlmann 2011年

还有一个原因经常需要为此使用JavaScript。该表格可能根本不是“表格”。例如,您的表单实际上只是Backbone.js / Ember.js / AngularJS应用程序的输入的集合,数据永远不会以传统形式提交给服务器,而是需要使用JavaScript客户端严格进行处理。在这种情况下,没有可供重置的表格。
约翰·蒙施

3
.live()已弃用,而且速度缓慢/不必要。您可以使用.bind().on()
凯文·比尔


12

我有最简单的技巧来重置表格

jQuery("#review-form")[0].reset();

要么

$("#review-form").get().reset();

12

使用Javascript,您只需使用以下语法即可 getElementById("your-form-id").reset();

您也可以通过以下方式调用reset函数来使用jquery $('#your-form-id')[0].reset();

记住不要忘记[0]。如果您将收到以下错误

TypeError:$(...)。reset不是函数

jQuery还提供了可以使用的事件

$('#form_id')。trigger(“ reset”);

我试过了并且有效。

注意:务必注意,这些方法仅将表单重置为服务器在页面加载时设置的初始值。这意味着,如果您在进行随机更改之前将输入设置为“设置值”,则在调用reset方法后,该字段将被重置为相同的值。

希望能帮助到你


7
$('#editPOIForm').each(function(){ 
    this.reset();
});

表单editPOIFormid属性在哪里。


2
将永远只有一个#editPOIForm,因此该.each()方法没有任何意义。即使您将此ID添加到多种形式,它也只会返回其中一种形式。
凯文·比尔

1
each()允许您使用this(而不是$(this))获取底层的DOM对象,然后调用reset()。假设您想重置为默认值,而不是清除所有内容,这是一个很好的解决方案。
戴夫

@Dave Might也可以使用$('#editPOIForm').get(0).reset();
Thomas Daugaard

2
@ThomasDaugaard:除了如果您使用get(0)或仅使用$('#editPOIForm')[0],否则如果$('#editPOIForm')不匹配任何元素,则会出现脚本错误,而each()会在没有一个错误。因此,我想就错误处理而言,这取决于您的优先级。
戴夫


6

经过测试和验证的代码:

  $( document ).ready(function() {
    $('#messageForm').submit(function(e){
       e.preventDefault();
    });
    $('#send').click(function(e){
      $("#messageForm")[0].reset();
    });
  });

必须包含Java脚本,$(document).ready并且必须包含在您的逻辑中。


5

最简单,最好的解决方案是-
$("#form")[0].reset();

不要在这里使用-
$(this)[0].reset();


只是一点警告:如果您有输入的默认值(例如,服务器渲染),form.reset();则将重置为这些值,并且不会清除输入。
Evil_Bengt

4

让我们说如果您想清除除accountType以外的字段,则平均时间下拉框中将重置为特定值,即“全部”。其余字段应重置为空即文本框。此方法将用于清除特定领域作为我们的要求。

 $(':input').not('#accountType').each( function() {

    if(this.type=='text' || this.type=='textarea'){
             this.value = '';
       }
    else if(this.type=='radio' || this.type=='checkbox'){
         this.checked=false;
      }
         else if(this.type=='select-one' || this.type=='select-multiple'){
              this.value ='All';
     }
 });

最完整的答案。谢谢。
RationalRabbit

一个问题:如果以编程方式而不是单击按钮,如何将其定向到特定表单?
RationalRabbit


3

在您想通过jQuery调用Normal Reset函数的地方使用此代码

setTimeout("reset_form()",2000);

并在准备就绪的文档上将此功能写出站点jQuery

<script>
function reset_form()
{
    var fm=document.getElementById('form1');
    fm.reset();
}
</script>

3

你们中有些人抱怨收音机等已清除默认的“已检查”状态...您要做的就是将.radio,:checkbox选择器添加到.not中,问题就解决了。

如果您无法使所有其他重置功能正常工作,则可以使用此功能。

  • 改编自ngen的答案

    function form_reset(formID){
        $(':input','#'+formID)
        .not(':button',':submit',':reset',':hidden',':radio',':checkbox')
        .val('');
    }

2
@using (Ajax.BeginForm("Create", "AcceptanceQualityDefect", new AjaxOptions()
{
    OnSuccess = "ClearInput",
    HttpMethod = "Post",
    UpdateTargetId = "defect-list",
    InsertionMode = InsertionMode.Replace
}, new { @id = "frmID" })) 
  1. frmID 是表格的标识
  2. OnSuccess操作的名称称为“ ClearInput” 的JavaScript函数

    <script type="text/javascript">
        function ClearInput() {
            //call action for render create view
            $("#frmID").get(0).reset();
        }
    </script>
  3. 如果您同时执行上述两项操作,那么您将无法使其停止工作...


1

以下代码清除了所有表单,并且其字段为空。如果您只想清除页面包含多个表单的特定表单,请提及表单的ID或类

$("body").find('form').find('input,  textarea').val('');

0

如果我想清除除accountType以外的所有字段,请使用以下命令

$q(':input','#myform').not('#accountType').val('').removeAttr('checked').removeAttr('selected');

1
您不想丢失复选框en单选按钮的值,而只是取消选中它们,这不是一个好的解决方案
Frankey 2013年

0

我在此处以及相关SO问题上看到的代码似乎不完整。

重置表单意味着从HTML设置原始值,因此我将其汇总到一个基于上面的代码正在做的小项目中:

            $(':input', this)
                .not(':button, :submit, :reset, :hidden')
                .each(function(i,e) {
                    $(e).val($(e).attr('value') || '')
                        .prop('checked',  false)
                        .prop('selected', false)
                })

            $('option[selected]', this).prop('selected', true)
            $('input[checked]',   this).prop('checked',  true)
            $('textarea',         this).each(function(i,e) { $(e).val($(e).html()) })

请让我知道我是否缺少任何东西或可以改善的地方。


0

当页面包含对涉及IHttpHandler请求处理(captcha)的Web用户控件的调用时,上述方法都不适用。在发送requsrt(用于图像处理)之后,以下代码未清除表单上的字段(在发送HttpHandler request之前),所有内容均正常运行。

<input type="reset"  value="ClearAllFields" onclick="ClearContact()" />

 <script type="text/javascript">
       function ClearContact() {
           ("form :text").val("");
       }
    </script>

0

我写了一个通用的jQuery插件:

/**
 * Resets any input field or form
 */
$.fn.uReset = function () {
    return this.filter('form, :input').each(function () {
        var input = $(this);
        
        // Reset the form.
        if (input.is('form')) {
            input[0].reset();
            return;
        }

        // Reset any form field.
        if (input.is(':radio, :checkbox')) {
            input.prop('checked', this.defaultChecked);
        } else if (input.is('select')) {
            input.find('option').each(function () {
                $(this).prop('selected', this.defaultSelected);
            });
        } else if (this.defaultValue) {
            input.val(this.defaultValue);
        } else {
            console.log('Cannot reset to default value');
        }
    });
};

$(function () {
    // Test jQuery plugin.
    $('button').click(function (e) {
        e.preventDefault();
        
        var button = $(this),
            inputType = button.val(),
            form = button.closest('form');
        
        if (inputType === 'form') {
            form.uReset()
        } else {
            $('input[type=' + inputType + '], ' + inputType, form).uReset();
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h3>Form</h3>
<form>
    <input type="text" value="default"/><br /><br />
    Ch 1 (default checked) <input type="checkbox" name="color" value="1" checked="checked" /><br />
    Ch 2 <input type="checkbox" name="color" value="2" /><br />
    Ch 3 (default checked) <input type="checkbox" name="color" value="3" checked="checked" /><br /><br />
    <select name="time"><br />
        <option value="15">15</option>
        <option selected="selected" value="30">30</option>
        <option value="45">45</option>
    </select><br /><br />
    R 1 <input type="radio" name="color" value="1" /><br />
    R 2 (default checked) <input type="radio" name="color" value="2" checked="checked" /><br />
    R 3 <input type="radio" name="color" value="3" /><br /><br />
    <textarea>Default text</textarea><br /><br />
    
    <p>Play with form values and then try to reset them</p>
    
    <button type="button" value="text">Reset text input</button>
    <button type="button" value="checkbox">Reset checkboxes</button>
    <button type="button" value="select">Reset select</button>
    <button type="button" value="radio">Reset radios</button>
    <button type="button" value="textarea">Reset textarea</button>
    <button type="button" value="form">Reset the Form</button>
</form>


-2

添加隐藏的重置按钮,如下所示

<input id="resetBtn" type="reset" value="reset" style="display:none" />
// Call reset buttons click event
// Similar to ClearInputs('resetBtn');
function ClearInputs(btnSelector) {
     var btn = $("#" + btnSelector);
     btn.click();
}

-4

$('form')。submit(function(){

var el = $(this);

$('<button type="reset" style="display:none; "></button>')
    .appendTo(el)
    .click()
    .remove()
;

return false;

});

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.