使用 jQuery 清除表单字段

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6364289/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 20:44:49  来源:igfitidea点击:

Clear form fields with jQuery

jqueryhtmlforms

提问by tbuehlmann

I want to clear all input and textarea fields in a form. It works like the following when using an input button with the resetclass:

我想清除表单中的所有输入和文本区域字段。在reset类中使用输入按钮时,它的工作方式如下:

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

This will clear all fields on the page, not just the ones from the form. How would my selector look like for just the form the actual reset button lives in?

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

回答by ngen

For jQuery 1.6+:

对于 jQuery 1.6+

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

For jQuery < 1.6:

对于 jQuery < 1.6

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

Please see this post: Resetting a multi-stage form with jQuery

请参阅此帖子: 使用 jQuery 重置多阶段表单

Or

或者

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

As jQuery suggests:

正如 jQuery 所建议的

To retrieve and change DOM properties such as the checked, selected, or disabledstate of form elements, use the .prop()method.

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

回答by ShaneBlake

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

回答by user768680

Any reason this shouldn't be used?

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

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

回答by parapura rajkumar

This won't handle cases where form input fields have non empty default values.

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

Something like should work

类似的东西应该工作

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

回答by Lukas Liesis

if you use selectors and make values to empty values, it is not resetting the form, it's making all fields empty. Reset is to make form as it was before any edit actions from user after the load of form from server side. If there is an input with name "username" and that username was prefilled from server side, most of solutions on this page will delete that value from input, not reset it to the value how it was before user's changes. If you need to reset the form, use this:

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

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

if you need not to reset the form, but fill all inputs with some value, for example empty value, then you can use most of the solutions from other comments.

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

回答by jroi_web

Simple but works like a charm.

简单但工作起来就像一个魅力。

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

回答by Tarmo Saluste

If someone is still reading this thread, here is the simplest solution using not jQuery, but plain JavaScript. If your input fields are inside a form, there is a simple JavaScript reset command:

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

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

More about it here: http://www.w3schools.com/jsref/met_form_reset.asp

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

Cheers!

干杯!

回答by apen

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

回答by Matt Ball

Why does it need to be done with any JavaScript at all?

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

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

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

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



Tried that one first, it won't clear fields with default values.

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

Here's a way to do it with jQuery, then:

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

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

回答by Rashi Goyal

If you want to empty all input boxes irrespective of its type then it's a minute step by

如果您想清空所有输入框而不管其类型,那么只需一步

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