傳統 HTML 表單數據的“整存整取”

在日常開發中，涉及表單的處理司空見慣。過往，在取值和賦值的過程中，借助 jQuery 常常只是逐個控件進行操作，可惜這樣開發效率並不高。那么能不能批量獲取整個表單的值呢，以及批量為表單賦值。

一、取值、賦值的擴展方法

/* jQuery 擴展 */
jQuery.fn.extend({
 
    /* 清空表單 */
    formClear: function () {
        this.find("input:text,select,input:hidden,input:password").each(function () {
            $(this).val("");
        });
        this.find("input:checkbox,input:radio").each(function () {
            $(this).removeAttr("checked");
        });
    },
 
    /* 填充表單 */
    // 例如 $('form').formFill({ data : {id:1} , prefix : "user." })，填充后形如 <input name='user.id' value='1' >
    formFill: function (option) {
        var prefix = option.prefix;
        if (prefix == undefined) prefix = "";
        var frmData = option.data;
        for (i in frmData) {
            var dataKey = i;
            var thisData = this.find("[name='" + prefix + i + "']");
            var text = "text";
            var hidden = "hidden";
            if (thisData != null) {
                var thisDataType = thisData.attr("type");
                var val = frmData[i];
                var isdata = (val != null && val.toString().lastIndexOf("/Date(") != -1);
                if (thisDataType == "radio") {
                    thisData.filter("[value=" + val + "]").attr("checked", "checked")
                    if (val == true || val == "0") val = "True";
                    else if (val == false || val != "0") val = "False";
                    thisData.filter("[value=" + val + "]").not("donbool").attr("checked", "checked")
                } else if (thisDataType == "checkbox") {
                    if (thisData.size() == 1) {
                        if (val == "true" || val == 1 || val == "True" || val == "1") {
                            thisData.attr("checked", "checked");
                        } else {
                            thisData.removeAttr("checked");
                        }
                    } else {
 
                        thisData.removeAttr("checked");
                        var cbIndex = i;
                        if (val.lastIndexOf(",") == -1) {
                            this.find("[name='" + prefix + dataKey + "'][value='" + prefix + val + "']").attr("checked", "checked");
                        } else {
                            jQuery(val.split(',')).each(function (i, v) {
                                this.find("[name='" + prefix + dataKey + "'][value='" + prefix + v + "']").attr("checked", "checked");;
                            })
                        }
                    }
 
                } else {
                    if (isdata) {
                        val = jQuery.Convert.jsonReductionDate(val);
                    }
                    if (val == "null" || val == null)
                        val = "";
                    if (val == "" && thisData.attr("watertitle") == thisData.val()) {
                    } else {
                        thisData.val(val + "");
                        thisData.removeClass("watertitle");
                    }
                }
            }
        }
    },

    /* 抓取表單 */
    // changeToBool 設置為true的話，會把string型"true"和"false"字符串值轉化為boolean型
    formSerialize: function (changeToBool) {
        var formArray = this.serializeArray();
        var oRet = {};
        for (var i in formArray) {
            if (typeof (oRet[formArray[i].name]) == 'undefined') {
                if (changeToBool) {
                    oRet[formArray[i].name] = (formArray[i].value == "true" || formArray[i].value == "false") ? formArray[i].value == "true" : formArray[i].value;
                }
                else {
                    oRet[formArray[i].name] = formArray[i].value;
                }
            }
            else {
                if (changeToBool) {
                    oRet[formArray[i].name] = (formArray[i].value == "true" || formArray[i].value == "false") ? formArray[i].value == "true" : formArray[i].value;
                }
                else {
                    oRet[formArray[i].name] += "," + formArray[i].value;
                }
            }
        }
        return oRet;
    }

}); // end extend

formClear：清空表單中所有控件的值

$("form#editForm").formClear();

formFill：填充表單所有控件

$("form#editForm").formFill({ data: result.Data });

formSerialize：獲取表單中所有控件的值

// 收集表單數據
var serializeForm = $("#searchForm").formSerialize(true);

參數設置為true的話，會把string型的"true"和"false"字符串值轉化為boolean型。

如果需要追加額外的屬性，使用 extend 合並即可：

$.extend(serializeForm, { openId: openId });

除了上述的合並方式之外，還可以直接為屬性賦值，這樣 js 語言層面會自動追加屬性：

if (serializeForm.hasOwnProperty("IsSubscribeSenderEmail")) {
    serializeForm["IsSubscribeSenderEmail"] = 1;
} else {
    serializeForm["IsSubscribeSenderEmail"] = 0;
}