2019年3月13日 星期三

[Javascript] form to json string

在開發前端時,有時需要把畫面的輸入欄位匯成JSON傳送
若要自行處理,需要每一個輸入元件逐一取出
導致程式過於冗長,重複取值的寫法遍滿各區塊

另外,如果環境沒有jquery,變成要原生javascript處理
後來查找,稍微改成下方的function
傳入callName,可以將class內的元件轉成json string

 function toJSONString(className) {
    let obj = {};

    let elements = document.querySelector("." + className).querySelectorAll("input, select, textarea");
    for (let i = 0; i < elements.length; ++i) {
        let element = elements[i];
        let key = !element.id ? element.name : element.id; // 取得id或是name
        let value = element.value;

        if (key) {
            obj[key] = value;
        }
    }
    return JSON.stringify(obj);
}

Ref: https://codepen.io/gabrieleromanato/pen/LpLVeQ
https://www.lvh.io/posts/queryselectorall-from-an-element-probably-doesnt-do-what-you-think-it-does.html



沒有留言:

張貼留言