用jQuery清除表单域

我想清除窗体中的所有input和textarea字段。 使用带reset类的inputbutton时，它的工作方式如下所示：

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

这将清除页面上的所有字段，而不仅仅是表单中的字段。 我的select器如何看起来只是实际的重置button居住的forms？

Answer 1

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

Answer 2

请看这篇文章： 使用jQuery重置多阶段表单

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

要么

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

Answer 3

任何理由不应该使用？

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

Answer 4

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

就像应该工作

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

Answer 5

如果您使用select器并将值设为空值，则不会重置表单，而是将所有字段设为空。 重置就是在从服务器端加载表单之后的任何用户编辑操作之前进行的forms。 如果有名为“username”的input，并且该用户名是从服务器端预填充的，则此页上的大多数解决scheme将从input中删除该值，而不会将其重置为在用户更改之前的值。 如果您需要重置表单，请使用以下命令：

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

如果您不需要重置表单，但是用一些值填充所有input，例如空值，则可以使用其他注释中的大部分解决scheme。

Answer 6

简单，但像一个魅力。

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

Answer 7

如果有人仍然在阅读这个线程，这里是最简单的解决scheme，不使用jQuery，而是纯JavaScript。 如果你input的字段在一个表单里，有一个简单的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

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

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

记住不要忘记[0] 。 如果你会得到以下错误

TypeError：$（…）。reset不是函数

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

$（ '＃form_id'）的触发器（ “重置”）。

我试过，它的工作原理。

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

希望它有帮助

Answer 12

如果你想清空所有的input框，而不pipe它的types，那么这是一分钟的时间

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

Answer 13

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

其中editPOIForm是表单的id属性。

Answer 14

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

Answer 15

经过testing和validation的代码：

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

Javascript必须包含在$(document).ready ，并且必须与您的逻辑相关。

Answer 16

让我们说，如果你想清除的领域，除了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'; } }); 

Answer 17

我使用这个：

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

这是我的button：

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

Answer 18

使用这个代码你想调用正常的复位function通过jQuery

 setTimeout("reset_form()",2000); 

并在文档就绪写这个function的网站jQuery

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

Answer 19

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

1. frmID是表单的标识

2. 在操作的OnSuccess中，我们将JavaScript函数称为“ ClearInput ”

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

3. 如果你这两个权利，那么你将无法阻止它的工作…

Answer 20

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

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

Answer 21

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

请让我知道，如果我失去了什么或任何可以改善。

Answer 22

当页面包含一个涉及IHttpHandler请求处理（captcha）的Web用户控件的调用时，上述方法都不起作用。 在发送请求（用于image processing）后，下面的代码不会清除表单上的字段（在发送HttpHandler请求之前），所有东西都能正常工作。

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

Answer 23

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

Answer 24

下面的代码清除所有的表单，它的字段将是空的。 如果你想只清除一个特定的表单，如果页面有多个表单，请提及表单的ID或类别

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

Answer 25

添加隐藏的重置button如下

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

Answer 26

$（'form'）。submit（function（）{

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

}）;