최종 수정일 :
(1년 전)
xhr(XMLHttpRequest) 혹은 fetch 등으로 데이터를 보낼(POST) 때, 쓰는 스크립트입니다.
input[type="submit"]을 클릭했을 때와 같은 동작을 하는 버튼을 만들 때 쓰신다고 생각하시면 편합니다.
function serialize(form) { const serialized = new FormData();
for (let i = 0, length = form.elements.length; i < length; i++) { 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 = 0; n < field.options.length; n++) field.options[n].selected && serialized.append(field.name, field.options[n].value); }
else { ("checkbox" !== field.type && "radio" !== field.type || field.checked) && serialized.append(field.name, field.value) }
} }
return serialized;}
위 함수를 추가한 뒤
* jQuery엔 .serialize()란 함수가 있습니다. 참고
const myForm = document.getElementById("myForm");const data = serialize(myForm);
fetch(myForm.action, { method: "POST", body: data})
이런 방식으로 데이터를 보내시면 됩니다.
예시에선 form에 적힌 action의 url로 데이터를 보냈는데, myForm.action을 "https://example.com"등 주소로 변경하실 수도 있습니다.
