使用jQuery清除表单字段

Question

我想清除表单中的所有输入和textarea字段.当使用类的输入按钮时,它的工作方式如下reset:

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

这将清除页面上的所有字段,而不仅仅是表单中的字段.我的选择器如何只是实际重置按钮所在的形式？

Answer 1

对于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属性,如checked,selected或disabled元素形式的元素状态,使用.prop()方法.

Answer 2

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

Answer 3

有什么理由不应该使用？

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

Answer 4

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

有点像应该工作

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

Answer 5

如果你使用选择器并使值为空值,它不会重置表单,它会使所有字段为空.重置是在从服务器端加载表单之后,从用户执行任何编辑操作之前的格式.如果存在名称为"username"的输入并且该用户名是从服务器端预填充的,则此页面上的大多数解决方案将从输入中删除该值,而不是将其重置为用户更改之前的值.如果您需要重置表单,请使用:

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

如果您不需要重置表单,但用一些值填充所有输入,例如空值,那么您可以使用其他注释中的大多数解决方案.

Answer 6

简单,但工作就像一个魅力.

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

Answer 7

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

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

更多关于它:http: //www.w3schools.com/jsref/met_form_reset.asp

干杯!

Answer 8

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

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

Answer 10

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

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

要么

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

Answer 11

如果你想清空所有输入盒而不管它的类型,那么它只需要一分钟

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

Answer 12

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

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

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

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

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

$( '#form_id')的触发器( "重置").

我试过,它的工作原理.

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

希望能帮助到你

Answer 13

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

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

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

Answer 14

我用这个：

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

这是我的按钮：

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

Answer 15

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

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

• 改编自 ngen 的答案

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

Answer 16

假设您想清除除帐户类型之外的字段，同时下拉框将重置为特定值，即“全部”。其余字段应重置为空，即文本框。此方法将用于清除特定领域作为我们的要求。

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

Answer 17

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

表格editPOIForm的id属性在哪里.

Answer 18

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

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

Answer 19

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

Answer 20

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

setTimeout("reset_form()",2000);

并在文档就绪时将此函数写入站点 jQuery

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

Answer 21

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

Answer 22

经过测试和验证的代码:

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

必须包含Javascript $(document).ready,它必须与您的逻辑一致.