使用jQuery重置多级表单

我有一个标准的重置按钮的形式编码如下:

<input type="reset" class="button standard" value="Clear" />

问题是，所述表单是多阶段的，所以如果用户填写了一个阶段&然后稍后返回，当单击Clear按钮时，各个字段的“记住”值不会重置。

我在想，附加一个jQuery函数循环所有的字段和清除他们'手动'将做的技巧。我已经在使用jQuery的形式，但我只是刚刚赶上速度&所以我不知道如何做到这一点，除了单独引用每个字段的ID，这似乎不是很有效。

请TIA帮忙。

283241 次浏览
小开
最佳答案

2012年3月更新。

所以，在我最初回答这个问题的两年后，我回头看看，它已经变成了一个大混乱。我觉得是时候回到这个问题上来，让我的答案真正正确了，因为它得到了最多的好评和接受。

为了记录，Titi的答案是错误的，因为它不是最初的海报所要求的-它是正确的，可以使用本地reset()方法重置表单，但这个问题是试图清除表单的记忆值，如果您以这种方式重置它将保留在表单中。这就是为什么“手册”;需要重置。我假设大多数人都是从谷歌搜索中找到这个问题的，并且真正在寻找reset()方法，但它不适用于OP所谈论的特定情况。

我的原始答案是这样的:

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

这可能适用于许多情况，包括OP，但正如评论和其他回答中指出的那样，将从任何值属性中清除单选/复选框元素。

一个更正确的的答案(但不完美)是:

function resetForm($form) {
$form.find('input:text, input:password, input:file, select, textarea').val('');
$form.find('input:radio, input:checkbox')
.removeAttr('checked').removeAttr('selected');
}


// to call, use:
resetForm($('#myform')); // by id, recommended
resetForm($('form[name=myName]')); // by name

jQuery认为，单独使用:text、:radio等选择器是一种糟糕的做法，因为它们最终会求出*:text，这使得它花费的时间比应该花的时间长得多。我确实更喜欢白名单的方法，希望我在最初的回答中使用了它。无论如何，通过指定选择器的input部分，加上表单元素的缓存，这应该使它成为这里性能最好的答案。

如果人们默认的选择元素不是一个空值的选项，那么这个答案可能仍然有一些缺陷，但它肯定是通用的，这将需要根据具体情况进行处理。

小开

这里有一些东西可以让你开始

$('form') // match your correct form
.find('input[type!=submit], input[type!=reset]') // don't reset submit or reset
.val(''); // set their value to blank

当然，如果你有复选框/单选按钮，你也需要修改以包括它们，并设置.attr({'checked': false});

<强>编辑 保罗的答案更简洁。我的回答更啰嗦，因为我不知道:input选择器，也没有想过简单地删除选中的属性

小开

清除表单有点棘手，不像看起来那么简单。

建议你使用jQuery表单插件并使用它的clearForm或resetForm功能。

小开

我在一个相当大的表单(超过50个字段)上使用的方法是用AJAX重新加载表单，基本上就是回调服务器并返回字段及其默认值。这比试图用JS抓取每个字段，然后将其设置为默认值要容易得多。它还允许我将默认值保留在一个地方——服务器代码。在这个网站上，也有一些不同的默认设置取决于帐户的设置，因此我不必担心将这些发送给JS。唯一需要处理的小问题是AJAX调用后需要初始化一些建议字段，但这不是什么大问题。

小开

. getelementbyid(“纳”).reset ()

小开

简单地这样做

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

更多的信息

设置myinput.val('')可能无法模拟“reset”;100%如果你有这样的输入:

<input name="percent" value="50"/>

例如，在一个默认值为50的输入上调用myinput.val('')会将其设置为空字符串，而调用myform.reset()会将其重置为初始值50。

小开

我通常这样做:

$('#formDiv form').get(0).reset()

或

$('#formId').get(0).reset()
小开

我发现这很有效。

$(":input").not(":button, :submit, :reset, :hidden").each( function() {
this.value = this.defaultValue;
});
小开

考虑使用验证插件 -这很棒!重置表单很简单:

var validator = $("#myform").validate();
validator.resetForm();
小开

保罗接受的答案有个大问题。考虑:

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

.val('')行还将清除分配给复选框和单选按钮的任何value。所以如果你(像我一样)做这样的事情:

<input type="checkbox" name="list[]" value="one" />
<input type="checkbox" name="list[]" value="two" checked="checked" />
<input type="checkbox" name="list[]" value="three" />

使用公认的答案会将你的输入转换为:

<input type="checkbox" name="list[]" value="" />
<input type="checkbox" name="list[]" value="" />
<input type="checkbox" name="list[]" value="" />

哎呀——我正在使用这个值!

下面是一个修改后的版本，将保留您的复选框和无线电值:

// Use a whitelist of fields to minimize unintended side effects.
$('INPUT:text, INPUT:password, INPUT:file, SELECT, TEXTAREA', '#myFormId').val('');
// De-select any checkboxes, radios and drop-down menus
$('INPUT:checkbox, INPUT:radio', '#myFormId').removeAttr('checked').removeAttr('selected');
小开

这对我有用，pyrotex回答没有“重置选择字段，取他的，在这里”我的编辑:

// Use a whitelist of fields to minimize unintended side effects.
$(':text, :password, :file', '#myFormId').val('');
// De-select any checkboxes, radios and drop-down menus
$(':input,select option', '#myFormId').removeAttr('checked').removeAttr('selected');
//this is for selecting the first entry of the select
$('select option:first', '#myFormId').attr('selected',true);
小开

您可能会发现，没有jQuery实际上更容易解决这个问题。

在常规JavaScript中，这非常简单:

document.getElementById('frmitem').reset();

我总是试图记住，虽然我们使用jQuery来增强和加速我们的编码，但有时它实际上并没有更快。在这些情况下，使用另一种方法通常会更好。

小开

jQuery插件

我创建了一个jQuery插件，这样我就可以在任何需要的地方轻松使用它:

jQuery.fn.clear = function()
{
var $form = $(this);


$form.find('input:text, input:password, input:file, textarea').val('');
$form.find('select option:selected').removeAttr('selected');
$form.find('input:checkbox, input:radio').removeAttr('checked');


return this;
};

所以现在我可以通过调用:

$('#my-form').clear();
小开

所有这些答案都很好，但最简单的方法是使用虚假重置，即使用链接和重置按钮。

只需添加一些CSS来隐藏你真正的重置按钮。

input[type=reset] { visibility:hidden; height:0; padding:0;}

然后在你的链接上添加如下内容

<a href="javascript:{}" onclick="reset.click()">Reset form</a>


<input type="reset" name="reset" id="reset" /><!--This input button is hidden-->
希望这对你有帮助! a . < / p >
小开
我通常添加一个隐藏的重置按钮的形式。 当需要时: $(" #重置”).click ();< / p >
小开

我用的是Paolo Bergantino的解决方案，它很棒，但做了一些调整……特别是使用表单名称代替id。

例如:

function jqResetForm(form){
$(':input','form[name='+form+']')
.not(':button, :submit, :reset, :hidden')
.val('')
.removeAttr('checked')
.removeAttr('selected');
}

现在当我想用它的时候

<span class="button" onclick="jqResetForm('formName')">Reset</span>

如你所见，这适用于任何表单，因为我使用css样式来创建按钮，页面在单击时不会刷新。再次感谢Paolo的建议。唯一的问题是，如果我在表单中有默认值。

小开

我使用下面的解决方案，它为我工作(混合传统javascript和jQuery)

$("#myformId").submit(function() {
comand="window.document."+$(this).attr('name')+".reset()";
setTimeout("eval(comando)",4000);
})
小开 
<script type="text/javascript">
$("#edit_name").val('default value');
$("#edit_url").val('default value');
$("#edit_priority").val('default value');
$("#edit_description").val('default value');
$("#edit_icon_url option:selected").removeAttr("selected");
</script>
小开

基本上没有一个提供的解决方案使我高兴。 正如一些人指出的那样，他们会清空表单，而不是重新设置。< / p >

然而，有一些javascript属性可以帮助你:

  • 文本字段的defaultValue
  • defaultChecked用于复选框和单选按钮
  • defaultSelected用于选择选项

它们存储页面加载时字段的值。

写一个jQuery插件现在是微不足道的: (对于没有耐心的人来说……这是一个演示http://jsfiddle.net/kritzikratzi/N8fEF/1/)

插件代码

(function( $ ){
$.fn.resetValue = function() {
return this.each(function() {
var $this = $(this);
var node = this.nodeName.toLowerCase();
var type = $this.attr( "type" );


if( node == "input" && ( type == "text" || type == "password" ) ){
this.value = this.defaultValue;
}
else if( node == "input" && ( type == "radio" || type == "checkbox" ) ){
this.checked = this.defaultChecked;
}
else if( node == "input" && ( type == "button" || type == "submit" || type="reset" ) ){
// we really don't care
}
else if( node == "select" ){
this.selectedIndex = $this.find( "option" ).filter( function(){
return this.defaultSelected == true;
} ).index();
}
else if( node == "textarea" ){
this.value = this.defaultValue;
}
// not good... unknown element, guess around
else if( this.hasOwnProperty( "defaultValue" ) ){
this.value = this.defaultValue;
}
else{
// panic! must be some html5 crazyness
}
});
}
} )(jQuery);

使用

// reset a bunch of fields
$( "#input1, #input2, #select1" ).resetValue();


// reset a group of radio buttons
$( "input[name=myRadioGroup]" ).resetValue();


// reset all fields in a certain container
$( "#someContainer :input" ).resetValue();


// reset all fields
$( ":input" ).resetValue();


// note that resetting all fields is better with the javascript-builtin command:
$( "#myForm" ).get(0).reset();

一些笔记……

  • 我还没有研究新的html5表单元素，有些元素可能需要特殊处理，但同样的想法应该可以工作。
  • 元素需要直接引用。即$( "#container" ).resetValue()将不起作用。总是使用$( "#container :input" )代替。
  • 如上所述，这里是一个演示:http://jsfiddle.net/kritzikratzi/N8fEF/1/
小开

我只是PHP的中级水平，有点懒于钻研像JQuery这样的新语言，但下面不是一个简单而优雅的解决方案吗?

<input name="Submit1" type="submit" value="Get free quote" />
<input name="submitreset" type="submit" value="Reset" />
不知道为什么不设置两个提交按钮，只是目的不同而已。 那么简单:< / p > 
if ($_POST['submitreset']=="Reset") {
$_source = "--Choose language from--";
$_target = "--Choose language to--"; }

你只需要重新定义你的值回到默认值。

小开

修改$(document).ready()情况投票最多的答案:

$('button[type="reset"]').click(function(e) {
$form = $(this.form);
$form.find('input:text, input:password, input:file, select, textarea').val('');
$form.find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected');
e.preventDefault();
});
小开

这里刷新了复选框和选择:

$('#frm').find('input:text, input:password, input:file, textarea').val('');
$('#frm').find('input:radio, input:checkbox').attr("checked",false).checkboxradio("refresh");
$('#frm').find('select').val('').selectmenu('refresh');
小开

我也有同样的问题，保罗的职位帮助了我，但我需要调整一件事。我使用id advancedindexsearch的表单只包含输入字段，并从会话中获取值。出于某种原因，下面这些方法对我来说并不管用:

$("#advancedindexsearch").find("input:text").val("");

如果我在这之后放了一个警告，我看到了正确删除的值，但之后它们又被替换了。我仍然不知道为什么，但下面这句话确实对我起了作用:

$("#advancedindexsearch").find("input:text").attr("value","");
小开

Paolo的回答没有考虑日期选择器，添加这个:

$form.find('input[type="date"]').val('');
小开 
$(this).closest('form').find('input,textarea,select').not(':image').prop('disabled', true);
小开

我对保罗·伯甘蒂诺最初的回答做了一点改进

function resetFormInputs(context) {
jQuery(':input', context)
.removeAttr('checked')
.removeAttr('selected')
.not(':button, :submit, :reset, :hidden')
.each(function(){
jQuery(this).val(jQuery(this).prop('defautValue'));
});
}

通过这种方式，我可以将任何上下文元素传递给函数。我能够重置整个表单或仅某一组字段，例如:

resetFormInputs('#form-id'); // entire form
resetFormInputs('.personal-info'); // only the personal info field set

另外，输入的默认值将被保留。

小开

我对弗朗西斯·刘易斯的好办法做了轻微的修改。他的解决方案没有做的是将下拉选择设置为空白。(我认为当大多数人想要“清除”时，他们可能想让所有值为空。)这个函数使用.find('select').prop("selectedIndex", -1)。

$.fn.clear = function()
{
$(this).find('input')
.filter(':text, :password, :file').val('')
.end()
.filter(':checkbox, :radio')
.removeAttr('checked')
.end()
.end()
.find('textarea').val('')
.end()
.find('select').prop("selectedIndex", -1)
.find('option:selected').removeAttr('selected')
;
return this;
};
小开

以下是我的解决方案，它也适用于新的html5输入类型:

/**
* removes all value attributes from input/textarea/select-fields the element with the given css-selector
* @param {string} ele css-selector of the element | #form_5
*/
function clear_form_elements(ele) {
$(ele).find(':input').each(function() {
switch (this.type) {
case 'checkbox':
case 'radio':
this.checked = false;
default:
$(this).val('');
break;
}
});
}
小开

简单地像这样使用jQuery Trigger event:

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

这将重置复选框，单选按钮，文本框等…本质上，它会将表单转换为默认状态。简单地将#ID, Class, element放在jQuery选择器中。

小开

补充接受的答案，如果你使用SELECT2插件，你需要召回SELECT2脚本来更改所有的SELECT2字段:

function resetForm(formId){
$('#'+formId).find('input:text, input:password, input:file, select, select2, textarea').val('');
$('#'+formId).find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected');
$('.select2').select2();
}
小开

对paolo的答案进行了轻微更新，以适应新的输入类型，如“tel"和电子邮件，下面的代码片段也将选择这些类型:

function resetForm(form) {
form.find('input:text, input[type=email], input[type=tel], input:password, input:file, select, textarea').val('');
form.find('input:radio, input:checkbox')
.removeAttr('checked').removeAttr('selected');
}

提交答案