使用 jQuery 清除表单字段

对于 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');

请参阅此帖子：Resetting a multi-stage form with jQuery

或者

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

作为 jQuery suggests：

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

---

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

---

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

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

---

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

像应该工作的东西

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

---

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

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

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

---

简单但像魅力一样工作。

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

---

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

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

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

干杯!

---

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

---

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

---

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

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

---

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

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

或者

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

---

使用 Javascript，您可以简单地使用这种语法 getElementById("your-form-id").reset();

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

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

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

JQuery 还提供了一个可以使用的事件

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

我试过了，它有效。

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

希望能帮助到你

---

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

其中 editPOIForm 是表单的 id 属性。

---

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

---

经过测试和验证的代码：

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

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

---

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

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

---

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

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

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

---

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

---

我用这个：

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

这是我的按钮：

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

---

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

如果你不能让所有其他的重置功能工作，这个可以。

改编自ngen的回答函数form_reset(formID){ $(':input','#'+formID) .not(':button',':submit',':reset',':hidden',':radio' ,':checkbox') .val(''); }

---

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

---

在您想通过 jQuery 调用正常重置功能的地方使用此代码

setTimeout("reset_form()",2000);

并在 Document Ready 上编写这个函数 Out Site jQuery

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

---

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

frmID 是表单 OnSuccess 的标识我们调用名为“ClearInput”的 JavaScript 函数 如果你做这两个正确，那么你将无法阻止它工作......

---

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

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

---

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

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

---

我在这里看到的代码和相关的 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()) })

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

---

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

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

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

---

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

/** * 重置任何输入字段或表单 */ $.fn.uReset = function () { return this.filter('form, :input').each(function () { var input = $(this); / / 重置表单 if (input.is('form')) { input[0].reset(); return; } // 重置任何表单字段 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 () { // 测试 jQuery 插件。$('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 (); } }); });

Form

<输入类型="text" value="default"/>

Ch 1（默认选中） < br /> Ch 2
Ch 3（默认选中）


15 30 45

R 1
R 2 (默认选中)
R 3

默认文本

使用表单值，然后尝试重置它们

重置文本输入 重置che ckboxes 重置选择 重置收音机 重置文本区域 重置表单

---

添加隐藏的重置按钮如下

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

---

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

    var el = $(this);

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

    return false;

});

---