使用jQuery重置多阶段表单

我有一个带有标准复位按钮的表格，所以编码：

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

麻烦的是，表示表单属于多阶段排序，所以若是用户填写一个阶段而后稍后返回，则单击“清除”按钮时，不会重置各个字段的“记住”值。

我认为附加一个jQuery函数来遍历全部字段并“手动”清除它们就能够了。 我已经在表单中使用了jQuery，但我只是起步速度，因此我不知道如何解决这个问题，除了经过ID单独引用每一个字段，这看起来效率不高。

TIA提供任何帮助。

---

#1楼

<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>

---

#2楼

基本上没有一个提供的解决方案让我开心。 正如一些人指出的那样，他们清空表格而不是重置表格。

可是，有一些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/

---

#3楼

我只是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--"; }

您只需将值从新定义为默认值便可。

---

#4楼

修改$(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();
});

---

#5楼

这里有复选框的刷新并选择：

$('#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');