xhr(XMLHttpRequest) 혹은 fetch 등으로 데이터를 보낼(POST) 때, 쓰는 스크립트입니다.

input[type="submit"]을 클릭했을 때와 같은 동작을 하는 버튼을 만들 때 쓰신다고 생각하시면 편합니다.

function serialize(form) {
    const serialized = new FormData();

    for (let i = 0length = form.elements.lengthi < lengthi++) {
        const field = form.elements[i];
        
        if (field.name && !field.disabled && "file" !== field.type && "reset" !== field.type && "submit" !== field.type && "button" !== field.type) {

            if ("select-multiple" === field.type) {
                for (let n = 0n < field.options.lengthn++)
                    field.options[n].selected && serialized.append(field.namefield.options[n].value);
            }

            else {
                ("checkbox" !== field.type && "radio" !== field.type || field.checked&& serialized.append(field.namefield.value)
            }

        }
        
    }

    return serialized;
}

위 함수를 추가한 뒤

* jQuery엔 .serialize()란 함수가 있습니다. 참고

const myForm = document.getElementById("myForm");
const data = serialize(myForm);

fetch(myForm.action, {
  method"POST",
  bodydata
})

이런 방식으로 데이터를 보내시면 됩니다.

예시에선 form에 적힌 action의 url로 데이터를 보냈는데, myForm.action을 "https://example.com"등 주소로 변경하실 수도 있습니다.

profile

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다

(?)