jQuery FormData에 input 값 동적으로 추가하는 방법 (id 기준)

 

jQuery에서 FormData에 input 값을 동적으로 추가하는 방법

• FormData란 무엇인가요?
• 기본적인 FormData 사용 예시
• 특정 input(id 기준)의 값을 FormData에 추가하기
• 전체 예제 코드
• 주의사항 및 팁

 

FormData 객체는 JavaScript와 jQuery에서 HTML 폼 데이터를 서버로 전송할 때 매우 유용한 도구입니다.
하지만 종종, <form> 태그 내에 없는 요소들(예: #startDateTime, #endDateTime)의 값을 함께 전송해야 할 때가 있죠. 이럴 땐 어떻게 처리할 수 있을까요?

이번 글에서는 jQuery를 사용해 FormData에 추가적인 input 값을 동적으로 삽입하는 방법을 코드와 함께 설명합니다.

 

 

🔹 FormData란?

FormData는 폼의 모든 필드 값을 key-value 쌍으로 구성된 객체로 만들어 AJAX 전송할 수 있게 도와줍니다.
기존에는 serialize()를 많이 사용했지만, 파일 업로드나 멀티파트 전송이 필요할 때 FormData가 훨씬 유용합니다.

 

🔹 FormData 기본 사용 예제

javascript

let form = $('#myForm')[0];
let formData = new FormData(form);

위와 같이 form 객체를 기반으로 FormData를 생성하면, 폼 내의 input, select, textarea 값이 자동으로 담깁니다.

 

🔹 특정 input 값을 추가로 FormData에 넣는 방법

html

<input type="text" id="startDateTime" value="2025-04-01 10:00" />
<input type="text" id="endDateTime" value="2025-04-01 18:00" />

 

이 값을 FormData에 넣고 싶다면 아래와 같이 하면 됩니다:

 

javascript

let form = $('#myForm')[0];
let formData = new FormData(form);

// ID를 기준으로 값을 가져와 추가
formData.append('startDateTime', $('#startDateTime').val());
formData.append('endDateTime', $('#endDateTime').val());

 

🔹 전체 예제 코드

<form id="myForm">
  <input type="text" name="username" value="tester">
</form>

<input type="text" id="startDateTime" value="2025-04-01 10:00" />
<input type="text" id="endDateTime" value="2025-04-01 18:00" />

<script>
  $('#submitBtn').on('click', function () {
    let form = $('#myForm')[0];
    let formData = new FormData(form);

    // 외부 input 추가
    formData.append('startDateTime', $('#startDateTime').val());
    formData.append('endDateTime', $('#endDateTime').val());

    $.ajax({
      url: '/api/submit',
      type: 'POST',
      data: formData,
      processData: false,
      contentType: false,
      success: function (res) {
        alert('서버 응답: ' + res.message);
      }
    });
  });
</script>

 

⚠️ 주의사항 및 팁

 

• FormData.append()는 중복된 key도 허용하므로 같은 키를 여러 번 추가할 경우, 서버에서 배열처럼 처리할 수 있습니다.
• processData: false, contentType: false 설정은 multipart/form-data 전송을 위해 필수입니다.
• 파일 업로드와 함께 사용할 경우에도 유용하게 적용 가능합니다.

 

 

 

폼 외부의 input 값도 jQuery의 FormData.append() 메서드를 사용하면 손쉽게 추가할 수 있습니다.
특히 날짜나 사용자 지정 파라미터를 실시간으로 추가해야 할 때 매우 유용한 기법입니다.

이 방법을 잘 활용하면 보다 유연하고 강력한 폼 처리 로직을 구성할 수 있습니다!

 

 

 

📌 이 글이 도움이 되셨다면 하트 ♥ 혹은 댓글로 피드백 부탁드립니다 :)
궁금한 점은 언제든지 댓글로 질문 주세요!