[Spring] JS로 <form>태그 동적으로 생성해서 활용하기

서버로 데이터를 보낼때 다양한 방법이 있지만, 자바스크립트 코드에서 `form` 태그를 동적으로 생성하여 서버로 데이터를 보내는 방법을 사용하면 유용할 때가 있다. 매번 찾아보기보다 이참에 정리해두려고 한다!
 
.
.
 
자바스크립트 코드에서 `form` 태그를 생성하고 속성을 설정하는 방법 : 

var form = document.createElement("form");
form.setAttribute("charset", "utf-8"); //인코딩 방식
form.setAttribute("method", "POST");  //보내는 방식 POST or GET
form.setAttribute("action", "/myInfo.do"); //데이터를 보낼 주소

위 코드에서는 `form` 요소를 생성하고, `charset`, `method`, `action` 속성을 설정한다. 이제 생성한 `form` 에 필요한 입력 필드들을 추가할 수 있다.

 

var myInfo = document.createElement("input");
myInfo.setAttribute("type", "hidden");
myInfo.setAttribute("name", "my_name");
myInfo.setAttribute("value", "${my_name}");
form.appendChild(myInfo);

// 필요한 입력 필드들 추가

위 예제는 `hidden` 입력 필드를 생성해서 `form` 에 추가하는 방법이다. 이와 같은 방식으로 필요한 입력 필드를 동적으로 생성하고 `form` 에 추가할 수 있다. 입력 필드의 유형(type) 과 속성(name, value 등) 은 실제로 필요한 값에 따라 조정하면 된다.

 

document.body.appendChild(form);
form.submit();

`form` 을 HTML 문서에 추가한 후에는 `form.submit( )` 메서드를 호출하여 `form` 을 서버로 보낼 수 있다.
위 코드는 `form` 을 문서의 `body` 에 추가한 다음 `form.submit()` 을 호출하여 서버로 데이터를 보내는 코드이다.
 
 
.
.
 
 
정리된 코드! 

var form = document.createElement("form");
form.setAttribute("charset", "utf-8");
form.setAttribute("method", "POST"); 
form.setAttribute("action", "/mom/reservationForm.do");

var rentInfo1 = document.createElement("input");
rentInfo1.setAttribute("type", "hidden");
rentInfo1.setAttribute("name", "placeNm");
rentInfo1.setAttribute("value", "${placeNm}");
form.appendChild(rentInfo1);

form.style.display = "none"; //데이터만 보낼때 화면상에서는 감추기! 

document.body.appendChild(form);
form.submit();