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

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

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

你能帮我吗?

谢谢!

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

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

Ryan提供的例子:

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

注意:这可能不会重置某些字段,例如type="hidden"

UPDATE

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

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

UPDATE

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

重置表单(但不清除表单)只是触发reset事件:

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

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

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

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

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

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

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

更多信息在这里和这里

  <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> 

您可以简单地使用resetbuttontypes。

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

的jsfiddle

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

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

我使用以下解决scheme:

1)设置JQueryvalidation插件

2)然后:

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

触发器的想法是聪明的,但是我想要做到这一点的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') 

会喜欢工作吗?

JQuery清除表单closures

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

HTML

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

JavaScript的

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

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