javascript

javascript 동적폼 만들기

noAb 2024. 10. 16. 17:04

상황 )

특정 버튼을 누르면 해당 객체의 유저이름과 시퀀스를 가지고 comentByDelete함수 실행

javascript를 사용하여 동적으로 폼으로 만들고 Post메서드를 사용하기 때문에 CSRF토큰을 INPUT타입 문자열로 받아온 뒤 생성된 폼에 insertAdjacentHTML를 사용하여 주입

<script type="text/javascript">   
	window.comentByDelete = (index,user) => { 
 		let delForm = document.createElement("form");
 		
		delForm.setAttribute("charset", "UTF-8");
		delForm.setAttribute("method", "Post");  //Post 방식
		delForm.setAttribute("action", "/comment/delete"); //요청 보낼 주소
		document.body.appendChild(delForm);
		let hiddenField1 = document.createElement("input");
		hiddenField1.setAttribute("type", "hidden");
		hiddenField1.setAttribute("name", "cmId");
		hiddenField1.setAttribute("value", index);
		delForm.appendChild(hiddenField1);
		
		let hiddenField2 = document.createElement("input");
		hiddenField2.setAttribute("type", "hidden");
		hiddenField2.setAttribute("name", "cmtUserId");
		hiddenField2.setAttribute("value", user);
		delForm.appendChild(hiddenField2);
		
		let hiddenField3 = `${_csrf.token}`;
		
		delForm.insertAdjacentHTML('beforeend', hiddenField3);
		console.log(delForm.innerHTML);
		
		delForm.submit(); 
	}
</script>