使用jQuery重置多阶段表单
我有一张带有标准重置按钮的表格,代码如下:使用jQuery重置多阶段表单,jquery,reset,forms,Jquery,Reset,Forms,我有一张带有标准重置按钮的表格,代码如下: <input type="reset" class="button standard" value="Clear" /> 问题是,所述表单是多级排序的,因此如果用户填写一个阶段,然后稍后返回,则单击清除按钮时,各个字段的“记忆”值不会重置 我认为附加一个jQuery函数来循环所有字段并“手动”清除它们就可以了。我已经在表单中使用jQuery了,但我只是在加快速度&因此我不知道如何去做,除了通过ID单独引用每个字段之外,这似乎不是很有效
<input type="reset" class="button standard" value="Clear" />
问题是,所述表单是多级排序的,因此如果用户填写一个阶段,然后稍后返回,则单击清除按钮时,各个字段的“记忆”值不会重置
我认为附加一个jQuery函数来循环所有字段并“手动”清除它们就可以了。我已经在表单中使用jQuery了,但我只是在加快速度&因此我不知道如何去做,除了通过ID单独引用每个字段之外,这似乎不是很有效
TIA寻求任何帮助。于2012年3月更新。
所以,在我最初回答这个问题两年后,我回来看到它几乎变成了一团乱麻。我觉得是时候回到这个问题上来,让我的答案真正正确了,因为它是最受欢迎的
作为记录,Titi的回答是错误的,因为它不是原始海报所要求的-可以使用本机reset()方法重置表单,这是正确的,但是这个问题试图清除表单中的记忆值,如果您以这种方式重置表单,这些值将保留在表单中。这就是为什么需要“手动”复位。我假设大多数人都是在谷歌搜索中遇到这个问题的,并且确实在寻找reset()方法,但它不适用于OP所讨论的特定情况
我最初的回答是:
// not correct, use answer below
$(':input','#myform')
.not(':button, :submit, :reset, :hidden')
.val('')
.removeAttr('checked')
.removeAttr('selected');
这可能适用于很多情况,包括OP,但正如评论和其他答案中所指出的,将清除任何值属性中的radio/checkbox元素
一个更正确的答案(但不是完美的)是:
使用:text
、:radio
等选择器本身被jQuery认为是不好的做法,因为它们最终的计算结果是*:text
,这使得它花费的时间比应该的要长得多。我确实更喜欢白名单方法,希望我在最初的回答中使用了它。无论如何,通过指定选择器的输入
部分,再加上表单元素的缓存,这应该使它成为这里性能最好的答案
如果人们对select元素的默认值不是一个空值的选项,那么这个答案可能仍然有一些缺陷,但它肯定是通用的,需要根据具体情况进行处理。下面是一些让您开始学习的内容
$('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
选择器,也没有想到简单地删除checked属性。清除表单有点棘手,不像看起来那么简单
建议您使用并使用其功能。
它处理了大多数的死角情况。我在一个相当大的表单(50多个字段)上使用的一种方法是使用AJAX重新加载表单,基本上是向服务器回调,然后返回带有默认值的字段。这比使用JS获取每个字段,然后将其设置为默认值要容易得多。它还允许我将默认值保留在一个地方——服务器的代码。在这个网站上,也有一些不同的默认设置,这取决于帐户的设置,因此我不必担心将这些发送到JS。我必须处理的唯一小问题是一些建议字段,这些字段在AJAX调用后需要初始化,但不是什么大问题。document.getElementById('frm').reset()来自:
设置myinput.val(“”)
可能不会100%模拟“重置”,如果您有如下输入:
<input name="percent" value="50"/>
<input type="checkbox" name="list[]" value="one" />
<input type="checkbox" name="list[]" value="two" checked="checked" />
<input type="checkbox" name="list[]" value="three" />
例如,对默认值为50的输入调用myinput.val(“”)
会将其设置为空字符串,而调用myform.reset()
会将其重置为初始值50。我通常会:
$('#formDiv form').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(“”)
行还将清除分配给复选框和单选按钮的任何值。所以,如果(像我一样)你做了这样的事情:
<input name="percent" value="50"/>
<input type="checkbox" name="list[]" value="one" />
<input type="checkbox" name="list[]" value="two" checked="checked" />
<input type="checkbox" name="list[]" value="three" />
这对我来说很有效,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.我通常会在表单中添加一个隐藏的重置按钮。
需要时,只需:
$(“#重置”)。单击() 我用的是保罗·贝甘蒂诺的解决方案,这很好,但没有什么调整。。。特别是使用表单名称而不是id
例如:
function jqResetForm(form){
$(':input','form[name='+form+']')
.not(':button, :submit, :reset, :hidden')
.val('')
.removeAttr('checked')
.removeAttr('selected');
}
resetFormInputs('#form-id'); // entire form
resetFormInputs('.personal-info'); // only the personal info field set
现在当我想用它的时候
<span class="button" onclick="jqResetForm('formName')">Reset</span>
重置
如您所见,这适用于任何表单,并且因为我使用css样式创建按钮,所以单击时页面不会刷新。再次感谢保罗的支持。唯一的问题是表单中是否有默认值。我使用了下面的解决方案,它对我有效(将传统javascript与jQuery混合使用)
<
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>
$("#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>
(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();
<input name="Submit1" type="submit" value="Get free quote" />
<input name="submitreset" type="submit" value="Reset" />
if ($_POST['submitreset']=="Reset") {
$_source = "--Choose language from--";
$_target = "--Choose language to--"; }
$('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');
$("#advancedindexsearch").find("input:text").val("");
$("#advancedindexsearch").find("input:text").attr("value","");
$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
$.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;
};
/**
* 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;
}
});
}
$('form').trigger("reset");
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();
}