我有一个标准的重置按钮的形式编码如下:
<input type="reset" class="button standard" value="Clear" />
问题是，所述表单是多阶段排序的，所以如果用户填写了一个阶段，然后稍后返回，当单击Clear按钮时，各个字段的“记住”值不会重置。
我在想，附加一个jQuery函数循环所有的字段和清除他们'手动'将做的技巧。我已经在使用jQuery的形式，但我只是刚刚赶上速度&所以我不知道如何做到这一点，除了单独引用每个字段的ID，这似乎不是很有效。
请TIA帮忙。
当前回答
这对我有用，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);
其他回答
修改$(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();
});
考虑使用验证插件——它很棒!重置表单很简单:
var validator = $("#myform").validate();
validator.resetForm();
基本上，提供的解决方案没有一个能让我满意。 正如一些人指出的那样，他们会清空表单，而不是重新设置。
然而，有一些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/
Paolo的回答没有考虑日期选择器，添加这个:
$form.find('input[type="date"]').val('');
$(this).closest('form').find('input,textarea,select').not(':image').prop('disabled', true);
