iT邦幫忙

1

[筆記,jQuery]還原已被序列化的表單

有時會需要將表單序列化存起來或做其他用途,也有時會需要把之前存起來的還原到表單上,不過js/jquery沒有內建的把表單反序列化回去,自行DIY也有些麻煩,網路上有很多大大因應當時專案可用的版本,找了一個比較全面的來使用~~

在下找到這篇Is there an inverse function to jQuery serialize? 來進行修改,這篇已經考慮到input群組/多選了,不過漏掉select的多選,改寫後怕忘記來上面記錄,也分享給有需要的人~~

有任何建議或可以更好的地方歡迎提出一起討論喔~~

表單序列化

$('#myForm').serialize();

還原表單


//使用方式
var serializeString = $('#myForm').serialize(); // 序列化
$('#myForm').deserialize(serializeString); // 還原表單


/**
 * 還原序列化到表單
 * @author 舜
 * @param {string} serializeString 序列化字串
 * 2019/11/05 : 修正當 name = xxx[] 會出錯的問題
 */
$.fn.deserialize = function(serializedString) {
    var $form = $(this);
    if($form.length==0) return;
    $form[0].reset();
    //serializedString = serializedString.replace(/+/g, '%20');
    var formFieldArray = serializedString.split("&");
    //Loop over all name-value pairs
    $.each(formFieldArray, function(i, pair) {
        var nameValue = pair.split("=");
        var name = decodeURIComponent(nameValue[0]);
        var value = decodeURIComponent(nameValue[1]);
        //Find one or more fields
        var $field = $form.find('[name="' + name + '"]');

        if($field.is("input")){
            //Checkboxes and Radio types need to be handled differently
            if ($field[0].type == "radio" || $field[0].type == "checkbox") {
                var $fieldWithValue = $field.filter('[value="' + value + '"]');
                var isFound = ($fieldWithValue.length > 0);
                //Special case if the value is not defined; value will be"on"
                if (!isFound && value == "on") {
                    $field.first().prop("checked", true);
                } else {
                    $fieldWithValue.prop("checked", isFound);
                }
            } else { //input
                $field.val(value);
            }
        }else if($field.is("select")){
            // 多選的下拉選單
            $field.val($field.val().concat([value]));
        } else { // textarea
            $field.val(value);
        }

    });
    return this;
}

1 則留言

0
舜~
iT邦好手 1 級 ‧ 2019-11-05 06:50:50

(2009-08-23)jQuery Plugin - 將欄位轉為JSON及還原
如果每個欄位都有ID的話,可以參考這一篇

我要留言

立即登入留言