동적 폼 생성 스크립트

아주 자주 사용하는 자바스크립트 함수중에 동적으로 폼을 생성하고, 히든 값을 추가하고, 서브밋 하는 함수를 소개하고자 한다.

물론 자바스크립트에서 [폼네임].submit(); 으로 대부분의 포스트 방식으로 페이징이 가능하지만,

그렇게 되면 HTML 상에 폼 태그가 반드시 있어야 하고, 폼의 위치나 전송방법 때문에 애를 먹는 일이 종종 있다.

그래서 얘를 조금 바꿔봤다.

 

	/* 폼: 생성 */
	function formCreate(nm,mt,at,tg) {
	 var f = document.createElement("form");
	 f.name = nm;
	 f.method = mt;
	 f.action = at;
	 f.target = tg ? tg : "_self";
	 return f;
	} 
	
	/* 폼: 인풋 생성 */
	function formInput(f,n,v) {
	 var i = document.createElement("input");
	 i.type = "hidden";
	 i.name = n;
	 i.value = v;
	 //f.appendChild(i);
	 f.insertBefore(i, null);
	 //f.insertBefore(i);
	 return f;
	}
	
	 /* 폼: 전송 */
	function formSubmit(f) {
	 document.body.appendChild(f);
	 f.submit();
	} 

이렇게 세 개의 함수를 공통으로 사용하는 js 파일에 추가한 뒤, 아래와 같이 사용한다.

 

function goCategoryPage(category_name) {
	var frm = formCreate('frmCategory','post','/main/category.do','');
	frm = formInput(frm, 'category_name', category_name);
	formSubmit(frm);	
}

1.  첫 번째 인자는 동적으로 만들 폼 이름을 정해주는 것이고,

    두 번째 인자는 포스트 방식과 겟방식 모두를 지원하기 위해 인자로 받는다.

    세 번째 인자는 이동하고자 하는 페이지다. 서버상에 존재하는 경로를 적는다.

    위의 예제에서는 '/main/category.do' <---- 요게 이동하고자 하는 페이지다.

     ( jsp를 바로 부른다고 하면 --> "/test/formtest.jsp" 이런걸 쓰면 된다.)

    네 번째 인자는 타겟인데, 페이지를 전송하는 대상이 자신이 아닌 프레임이나, 아이프레임, 혹은 팝업일 경우

    유용하게 사용할 수 있다.(포스트 방식의 팝업에 많이 썼던 것 같다.)

2.  frm = formInput(frm, 'category_name', category_name);

    얘는 동적으로 생성한 폼에 히든 값을 추가할 때 사용한다. 위의 예제에서는 'category_name' 이란 이름으로

    받아온 값을 'category_name' 이란 변수에 담아 폼에 저장해 준다. (얘를 이용하면 지저분한 폼태그와 히든 값

   넣는 태그 없이 값을 실을 수 있다.

3.  formSubmit(frm); --> 동적으로 만든 폼을 body 태그에 붙여준다. 동적으로 만들었기 때문에 메모리상에만

    존재하던 폼을 실제 HTML에 추가하고 해당 폼을 submit 해준다.

 

'/main/category.do' 라는 페이지로 category_name 의 값을 담아서 전송한다. 해당 페이지에서는 늘 하던 것 처럼

리퀘스트로 값을 받아서 처리할 수 있다.