使用 jQuery 清除表单字段答案

【问题标题】：Clear form fields with jQuery使用 jQuery 清除表单字段
【发布时间】：2011-09-15 21:31:22
【问题描述】：

我想清除表单中的所有输入和文本区域字段。当使用 reset 类的输入按钮时，它的工作原理如下：

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

这将清除页面上的所有字段，而不仅仅是表单中的字段。我的选择器会是什么样子，只是实际重置按钮所在的形式？

【问题讨论】：

查看 Paolo Bergantino stackoverflow.com/questions/680241/blank-out-a-form-with-jquery的答案
更详细的方法给reset a form here。

标签： jquery html forms

【解决方案1】：

对于 jQuery 1.6+：

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

对于 jQuery ：

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

请看这篇文章： Resetting a multi-stage form with jQuery

或者

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

作为 jQuery suggests:

要检索和更改 DOM 属性，例如表单元素的 checked、selected 或 disabled 状态，请使用 .prop() 方法。

【讨论】：

为了避免删除复选框值，我使用了以下内容，灵感来自您的回答：$(':input').not(':button, :submit, :reset, :hidden').removeAttr('checked').removeAttr('selected').not(':checkbox, select').val('').removeAttr('value');。它将删除默认值（即value="something"，但不适用于复选框或选择。
如果您有单选框、复选框或选择，请勿使用此（选项 1），在它们的值消失后，您将浪费大量时间来寻找一个奇怪的错误。正确的版本，保持其值不变：$(':input').not(':button, :submit, :reset, :hidden').removeAttr('checked').removeAttr('selected').not(':checkbox, :radio, select').val('');（基于 Jeppe Mariager-Lam 的评论）
有什么理由避免使用第二种选择？
大多数时候第二个选项是我们需要的 IMO。
您的第二个解决方案是实际答案

【解决方案2】：

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

【讨论】：

不要忘记您的 input[type=password] 字段。
这个答案涵盖了原始问题。那些想要的不仅仅是文本字段显然需要根据需要添加代码......
还记得在 HTML5 中除了 type=password（就像 SammyK 说的那样）之外还有更多类型的输入：type=url、type=digits、type=email 等http://www.w3.org/TR/html5/forms.html#states-of-the-type-attribute
一个小提示：此选择器不会选择依赖于隐式 type=text 的输入元素，您必须在标记中显式包含 type=text。这可能很明显，但对我来说不是，只是现在:-)
@CaptSaltyJack：这会将它们重置为默认值，这与清除它们不同......

【解决方案3】：

有什么理由不应该使用它？

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

【讨论】：

我认为清除和重置表单是不同的。查看此演示：jsfiddle.net/daubac402/7newh9Lk

【解决方案4】：

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

类似的东西应该可以工作

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

【讨论】：

我只有第一篇文章中的 js 代码，并希望它可以在每个页面上使用多种形式的多个重置按钮。所以只是选择器需要一些贡献。

【解决方案5】：

如果您使用选择器并将值设为空值，则不会重置表单，而是将所有字段设为空。重置是在从服务器端加载表单后，在用户进行任何编辑操作之前使表单保持原样。如果有一个名为“用户名”的输入并且该用户名是从服务器端预填充的，则此页面上的大多数解决方案都会从输入中删除该值，而不是将其重置为用户更改之前的值。如果您需要重置表单，请使用：

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

如果您不需要重置表单，而是用某个值（例如空值）填充所有输入，那么您可以使用其他 cmets 的大多数解决方案。

【讨论】：

【解决方案6】：

简单但效果很好。

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

【讨论】：

除非它不清除字段。它将它们设置为默认值。

【解决方案7】：

如果有人还在阅读这个帖子，这里是最简单的解决方案，不是使用 jQuery，而是使用纯 JavaScript。如果您的输入字段在表单中，则有一个简单的 JavaScript 重置命令：

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

更多信息在这里： http://www.w3schools.com/jsref/met_form_reset.asp

干杯！

【讨论】：

正如它所说。它重置为初始表单值，而不是清空这些值。但是，是的，如果您使用默认值加载表单，它们将不会被清除。可能是一个遍历所有输入并清除它们的 JS 循环

【解决方案8】：

$('form[name="myform"]')[0].reset();

【讨论】：

【解决方案9】：

为什么需要使用任何 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('');
});

【讨论】：

第一次尝试，它不会清除默认值的字段。
您经常需要 JavaScript 的另一个原因。表格可能根本不是“表格”。例如，您的表单实际上只是 Backbone.js/Ember.js/AngularJS 应用程序的输入集合，并且数据永远不会作为传统表单提交给服务器，而是需要严格使用 JavaScript 客户端进行处理。在这种情况下，没有可用于重置的表单。
.live() 已弃用，而且它很慢/没有必要。您可以只使用.bind() 或.on()。

【解决方案10】：

如果您想清空所有输入框而不管其类型如何，那么只需一分钟即可

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

【讨论】：

【解决方案11】：

我有最简单的方法来重置表单

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

我试过了，效果很好。

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

希望对你有帮助

【讨论】：

【解决方案13】：

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

其中editPOIForm 是表单的id 属性。

【讨论】：

只有一个#editPOIForm，所以.each() 方法没有意义。即使您将此 id 添加到多个表单中，它也只会返回其中一个。
each() 允许您使用 this（而不是 $(this)）来获取底层 DOM 对象，并调用 reset()。假设您想重置为默认值，而不是清除所有内容，这是一个很好的解决方案。
@Dave 也可以使用$('#editPOIForm').get(0).reset();
@ThomasDaugaard: 除非你使用 get(0) 或简单地使用 $('#editPOIForm')[0] 如果 $('#editPOIForm') 不匹配任何元素，你会得到一个脚本错误，而 each() 将失败而没有错误。所以我想就错误处理而言，这取决于您的优先级。

【解决方案14】：

你为什么不使用 document.getElementById("myId").reset(); ？这是简单漂亮的

【讨论】：

【解决方案15】：

经过测试和验证的代码：

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

Javascript 必须包含在 $(document).ready 中，并且必须符合您的逻辑。

【讨论】：

【解决方案16】：

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

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

【讨论】：

一点警告：如果您有输入的默认值，比如说服务器渲染，那么form.reset(); 将重置为这些值，并且不会清除输入。

【解决方案17】：

假设您要清除除 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';
     }
 });

【讨论】：

最完整的答案。谢谢。
一个问题：如果您以编程方式而不是单击按钮，如何将其定向到特定表单？

【解决方案18】：

我用这个：

$(".reset").click(function() {
  $('input[type=text]').each(function(){
     $(this).val('');
  });
});

这是我的按钮：

<a href="#" class="reset">
  <i class="fa fa-close"></i>
     Reset
</a>

【讨论】：

有一个复位输入类型可用w3.org/TR/html-markup/input.reset.html

【解决方案19】：

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

如果您无法让所有其他重置功能正常工作，那么这个可以。

改编自ngen的回答

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

【讨论】：

【解决方案20】：

通过结合使用 JQuery 的 .trigger() 和原生 Javascript 的 .reset()，所有表单元素都可以重置为空白状态。

$(".reset").click(function(){
    $("#<form_id>").trigger("reset");
});

将<form_id> 替换为要重置的表单ID。

【讨论】：

【解决方案21】：

$(document).ready(function() {
    $('#reset').click(function() {
    $('#compose_form').find("input[type=text] , textarea ").each(function() {
    $(this).val('');
   });
  });
});

【讨论】：

【解决方案22】：

在你想通过 jQuery 调用正常重置函数的地方使用此代码

setTimeout("reset_form()",2000);

并在文档就绪时将这个函数写出站点 jQuery

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

【讨论】：

【解决方案23】：

@using (Ajax.BeginForm("Create", "AcceptanceQualityDefect", new AjaxOptions()
{
    OnSuccess = "ClearInput",
    HttpMethod = "Post",
    UpdateTargetId = "defect-list",
    InsertionMode = InsertionMode.Replace
}, new { @id = "frmID" }))

frmID是表单的标识

OnSuccess的操作我们调用名为“ClearInput”的JavaScript函数

<script type="text/javascript">
    function ClearInput() {
        //call action for render create view
        $("#frmID").get(0).reset();
    }
</script>

如果这两项都做对了，那么你将无法阻止它工作...

【讨论】：

【解决方案24】：

以下代码清除所有表单，其字段将为空。如果页面有多个表单，如果您只想清除特定表单，请提及表单的 id 或类

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

【讨论】：

【解决方案25】：

如果我想清除除 accountType 之外的所有字段..使用以下

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

【讨论】：

你不想丢失单选按钮复选框的值，而只是取消选中它们，这不是一个好的解决方案

【解决方案26】：

我在此处和相关 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()) })

如果我遗漏了什么或者有什么可以改进的，请告诉我。

【讨论】：

【解决方案27】：

当页面包含对涉及 IHttpHandler 请求处理 (captcha) 的 Web 用户控件的调用时，上述方法均不适用于简单的情况。发送请求（用于图像处理）后，下面的代码不会清除表单上的字段（在发送 HttpHandler 请求之前）一切正常。

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

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

【讨论】：

【解决方案28】：

我写了一个通用的 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>

【讨论】：

【解决方案29】：

如下添加隐藏的重置按钮

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

【讨论】：

【解决方案30】：

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

    var el = $(this);

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

    return false;

});

【讨论】：