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

我正在寻找一个 jQuery 函数,它可以在提交表单之后清除表单的所有字段。

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

你能帮忙吗?

谢谢!

428601 次浏览
    <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>

工作需要吗?

关闭 JQuery Clear Form

注意 : 此答案与重置表单字段相关,而不是清除字段-请参阅更新。

您可以使用 JavaScript 的原生 reset()方法将整个表单 重置到其 违约状态。

莱恩提供的例子:

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

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

更新

正如 伊利亚 · 多罗辛所指出的,同样的事情可以通过使用 jQuery 的 trigger()来完成:

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

更新

如果您需要做的超过 重置的形式,其 违约的状态,您应该审查的答案,以 使用 jQuery 重置多阶段表单

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;


});


};

更多信息 给你给你

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

类似于 $("#formId").reset()的东西不会清除已经将默认值设置为 ""以外的表单项。发生这种情况的一种方法是先前提交的表单: 一旦提交了表单,reset()将“重置”表单值到先前提交的那些可能不是 ""的表单值。

清除页面上所有表单的一个选项是调用下面这样的函数,简单地按 clearForms()执行:

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

如果您想重置一个特定的表单,那么按如下方式修改该函数,并将其调用为 clearForm($("#formId")):

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

当我最初来到这个页面,我需要一个解决方案,考虑到形式默认被改变,仍然能够清除所有输入项。

注意,这将不会清除 placeholder文本。

我使用以下解决方案:

1)设定 Jquery 验证插件

2)然后:

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

要重置窗体(但不清除窗体) ,只需触发 reset事件:

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

安全表格中查看其他答案。

触发器的想法很聪明,但是我想用 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')

超文本标示语言

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

JavaScript

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

清除所有字段的简单而简短的功能

您可以简单地使用 reset按钮类型。

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

Jsfiddle

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

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