[FE/JS] 동적 form 생성해서 POST method로 전달하기

2021.03.25

10일차

 

입사 18일차.

22일부터 약 3일간 블로그를 쉬어서 그 동안 못올린 내용들은 한 번에 올린다.

 

시작부터 요구사항 분석에 참여하고, DB, UI설계를 진행하는 프로젝트에 참여하는 것은 주니어 개발자에게 큰 행운이다. 컬럼을 추가하든 자료형의 길이를 길게 하든 짧게 하든 아무 상관이 없기 때문이다.

 

오늘은 Step1. 페이지에서 SELECT해서 가져온 리스트 중 버튼을 클릭하면, 몇가지 인증 과정이 짜여진 Step2, Step3를 건너뛰고 바로 Step4로 건너뛸 수 있도록 JS를 짜는 과업을 받았다.

 

까다로웠던 점은

1. @PostMapping 어노테이션을 사용한 Controller

2. 기존의 Controller의 구조 그대로 사용해야 함

3. form은 이미 Step1 페이지에 사용하고 있는 상태

 

답은 동적 from 생성이다,

 

 

1. 동적 FORM

  ① document.createElement("form"); 을 사용해서 form을 생성한다.

  ② document.createElement("input"); Input 태그도 만들어준다.

  ③ setAttribute('속성', '속성값'); 을 사용해서 Input 태그에 속성을 만들어준다.

  ④ appendChild(); 를 사용해서 form안의 자식태그를 만들어준다.

 

 

2. 동적으로 태그 생성하기

  ① var newForm = document.createElement("form");

  ② var newInput = document.createElement("input");

  ③ document.createElement('태그'); >> 동적 태그를 생성할 수 있다.

 

 

3. 생성한 태그에 속성 부여하기

  ① newForm.setAttribute("method", "POST");

  ② newForm.setAttribute("action", "limreus.tistory.com/")

  ③ newInput.setAttribute("type", "text");

  ④ newInput.setAttribute("id", "newInputId");

  ⑤ newInput.setAttribute("value", "입력값");

  ⑥ 변수명.setAttribute("속성명", "속성값"); >> 새로 만든 태그에 속성을 부여할 수 있다.

 

 

4. 자식태그 만들기

  ① newForm.appendChild(newInput);

  ② 부모태그변수명.appendChild(자식태그변수명) >> 생성한 태그들을 부모, 자식관계로 만들 수 있다.

 

 

5. 완성한 태그를 html에 붙이기

  ① document.body.appendChild(newForm);  newForm.submit();

  ② document.body.appendChild(폼 변수명); >> Body태그에 생성한 html을 붙여 submit을 할 수 있게 만들어준다.

  ③ newForm.submit();  >> 생성한 동적form을 내가 정한 httpMethod로 전송

 

 

6. 코드

function fn_goPostMapping('파라미터를 사용하자') {       // form 태그 생성 & 속성부여       var newForm = document.createElement("form");       newForm.setAttribute("method", "POST");       newForm.setAttribute("action", "limreus.tistory.com/")              // input 태그 생성 & 속성부여       var newInput = document.createElement("input");       newInput.setAttribute("type", "text");       newInput.setAttribute("id", "newInputId");       newInput.setAttribute("value", "입력값");       // input을 form의 자식태그로 붙이기       newForm.appendChild(newInput);       // form을 body태그의 자식태그로 붙이기       document.body.appendChild(newForm);       newForm.submit(); }

 

html, css, js는 배울때마다 느끼는 점이 있다.

 

'아~ 이런 기능 있으면 좋겠다~' 하는 기능은 내가 몰라서 그렇지 다 있다.

계속 공부하고 배움에서 멀어지면 안된다.