jQuery / Javascript函数来清除表单的所有字段

我正在寻找一个jQuery函数，将提交表单后，将清除窗体的所有字段。

我没有任何HTML代码显示，我需要一些通用的。

你能帮我吗？

谢谢！

Answer 1

注意 ：这个答案与重置表单域相关，而不是清除域 – 见更新。

您可以使用JavaScript的本地reset()方法将整个表单重置为默认状态。

Ryan提供的例子：

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

注意：这可能不会重置某些字段，例如type="hidden" 。

UPDATE

正如IlyaDoroshin所指出的，使用jQuery的trigger()可以完成同样的事情：

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

UPDATE

如果您需要做的不只是将表单重置为默认状态，则应该查看使用jQuery重置多阶段表单的答案。

Answer 2

重置表单（但不清除表单）只是触发reset事件：

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

要清除表单，请参阅其他答案。

Answer 3

类似于$（“＃formId”）。reset（）的东西不会清除默认设置为非“”的表单项。 一种可能发生的方式是以前的表单提交。 表单提交后，reset（）会将表单值“重置”到以前提交的表单中，而这些表单可能不是“”。

要真正清除表单而不是简单地重置表单的一个select是调用这样的函数：

 function clearForm() { $(':input').not(':button, :submit, :reset, :hidden, :checkbox, :radio').val(''); $(':checkbox, :radio').prop('checked', false); } 

当我最初来到这个页面时，我需要一个解决scheme，它考虑到表单默认值被改变，并且仍然能够清除所有的input项目。

Answer 4

将val设置为“”

 function clear_form_elements(ele) { $(ele).find(':input').each(function() { switch(this.type) { case 'password': case 'select-multiple': case 'select-one': case 'text': case 'textarea': $(this).val(''); break; case 'checkbox': case 'radio': this.checked = false; } }); } <input onclick="clear_form_elements(this.form)" type="button" value="Clear All" /> <input onclick="clear_form_elements('#example_1')" type="button" value="Clear Section 1" /> <input onclick="clear_form_elements('#example_2')" type="button" value="Clear Section 2" /> <input onclick="clear_form_elements('#example_3')" type="button" value="Clear Section 3" /> 

你也可以尝试这样的事情：

  function clearForm(form) { // iterate over all of the inputs for the form // element that was passed in $(':input', form).each(function() { var type = this.type; var tag = this.tagName.toLowerCase(); // normalize case // it's ok to reset the value attr of text inputs, // password inputs, and textareas if (type == 'text' || type == 'password' || tag == 'textarea') this.value = ""; // checkboxes and radios need to have their checked state cleared // but should *not* have their 'value' changed else if (type == 'checkbox' || type == 'radio') this.checked = false; // select elements need to have their 'selectedIndex' property set to -1 // (this works for both single and multiple select elements) else if (tag == 'select') this.selectedIndex = -1; }); }; 

更多信息在这里和这里

Answer 5

  <form id="form" method="post" action="action.php"> <input type="text" class="removeLater" name="name" /> Username<br/> <input type="text" class="removeLater" name="pass" /> Password<br/> <input type="text" class="removeLater" name="pass2" /> Password again<br/> </form> <script> $(function(){ $("form").submit(function(e){ //do anything you want //& remove values $(".removeLater").val(''); } }); </script> 

Answer 6

您可以简单地使用resetbuttontypes。

 <input type="text" /> <input type="reset" /> 

的jsfiddle

编辑：记住， resetbutton，重置为原始值的forms，所以，如果该字段有一些值设置在字段<input type="text" value="Name" />按下reset该字段将重置用户插入的值，在这个例子中返回单词“name”。

参考： http ： //api.jquery.com/reset-selector/

Answer 7

我使用以下解决scheme：

1）设置JQueryvalidation插件

2）然后：

 $('your form's selector').resetForm(); 

Answer 8

触发器的想法是聪明的，但是我想要做到这一点的jQuery方式，所以这里是一个小函数，可以让你保持链接。

 $.fn.resetForm = function() { return this.each(function(){ this.reset(); }); } 

那就叫这个吧

 $('#divwithformin form').resetForm(); 

要么

 $('form').resetForm(); 

当然，你仍然可以在链中使用它

 $('form.register').resetForm().find('input[type="submit"]').attr('disabled','disabled') 

Answer 9

会喜欢工作吗？

JQuery清除表单closures

Answer 10

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

Answer 11

HTML

 <form id="contactform"></form> 

JavaScript的

  var $contactform = $('#contactform') $($contactform).find("input[type=text] , textarea ").each(function(){ $(this).val(''); }); 

简单和短的function，以清除所有领域