[JS] vanilla JS로 Serialize 구현하기

원본 소스 사이트(현재 접속이 안 됨 ㅠㅠ 웹 아카이브에서나 열람 가능

자주 쓰는데 오랫만에 원본사이트 가서 보려고 하니 접속이 안되길래...아카이빙 합니다...

 

HTML

<form id="frm">
        <fieldset>
            <legend>체크박스의 경우</legend>
            <label>
                <input type="checkbox" name="chk" value="chk1" checked/>
                <span>값1</span>
            </label>
            <label>
                <input type="checkbox" name="chk" value="chk2"/>
                <span>값2</span>
            </label>
            <label>
                <input type="checkbox" name="chk" value="chk3" checked/>
                <span>값3</span>
            </label>
        </fieldset>
        <fieldset>
            <legend>라디오의 경우</legend>
            <label>
                <input type="radio" name="rad" value="rad1"/>
                <span>값1</span>
            </label>
            <label>
                <input type="radio" name="rad" value="rad2"/>
                <span>값2</span>
            </label>
            <label>
                <input type="radio" name="rad" value="rad3" checked/>
                <span>값3</span>
            </label>
        </fieldset>
        <select name="selnormal">
            <option value="all">일반 셀렉트</option>
            <option value="sel1">값1</option>
            <option value="sel2" selected>값2</option>
            <option value="sel3">값3</option>
        </select>
        <select name="selmultiple" multiple>
            <option value="all">멀티플 셀렉트</option>
            <option value="sel1" selected>값1</option>
            <option value="sel2">값2</option>
            <option value="sel3" selected>값3</option>
        </select>
        <input type="text" name="txt" value="일반 텍스트 단일"/>
        <textarea name="txtarea">텍스트 영역</textarea>
        <button type="submit">확인</button>
    </form>
    <div id="result" contenteditable="true">json 결과</div>

JS

const $form = document.getElementById("frm");
const $result = document.getElementById("result");
 
$form.addEventListener("submit", (e) => {
    e.preventDefault();
    const formData = new FormData($form);
    const data = serialize(formData);
    console.log(data);
    $result.innerHTML = JSON.stringify(data);
 
});
 
function serialize(formData) {
    const result = {};
 
    for (const [key, value] of formData) {
        if (result[key] === undefined) {
            //기존값이 없는 경우엔 바로 현재값으로 지정
            result[key] = value;
        } else {
            //기존값이 존재하는 경우
            if(!Array.isArray(result[key])){
                //기존값을 배열로 변환한 뒤
                result[key] = [result[key]];
            }
            //현재값 추가
            result[key].push(value);
        }//ifElse
    }//for
 
    return result;
}//serialize