我有一个标准的重置按钮的形式编码如下:
<input type="reset" class="button standard" value="Clear" />
问题是,所述表单是多阶段排序的,所以如果用户填写了一个阶段,然后稍后返回,当单击Clear按钮时,各个字段的“记住”值不会重置。
我在想,附加一个jQuery函数循环所有的字段和清除他们'手动'将做的技巧。我已经在使用jQuery的形式,但我只是刚刚赶上速度&所以我不知道如何做到这一点,除了单独引用每个字段的ID,这似乎不是很有效。
请TIA帮忙。
我只是PHP的中级水平,有点懒于钻研像JQuery这样的新语言,但下面不是一个简单而优雅的解决方案吗?
<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--"; }
你只需要重新定义你的值回到默认值。
补充接受的答案,如果你使用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();
}
基本上,提供的解决方案没有一个能让我满意。
正如一些人指出的那样,他们会清空表单,而不是重新设置。
然而,有一些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/