使用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');