스크립트로 form 관리

form전송이 필요할 경우가 많은데, 그럴때마다 하단에 display:none으로 추가하거나 아주 작게 하여 안보이게 작업하였다. 하지만 스크립트로 관리하면 그런걸 매번 추가해줄 필요가 없다. 스크립트로 관리를 해보자.

// from 생성

this.frm = document.createElement("form");

this.frm.action = actionUrl;

this.frm.method = "post";

this.frm.target = "_self";

                this.frm.setAttribute("style", "display:none;");

타겟은 없어도 된다.

// 데이터 삽입

var tag = document.createElement("input");

tag.setAttribute("type", "hidden");

tag.setAttribute("id", key);

tag.setAttribute("name", key);

tag.value = keyValue;

this.frm.appendChild(tag);

input 태그를 하나 만들어 form에 추가했다.

document.body.appendChild(this.frm); //없으면 ie8에서 안됨. 

this.frm.submit();

submit하면 actionUrl로 포워딩된다. 이방식의 단점은 데이터를 만들때 스크립트로 속성을 일일히 설정해줘야한다.

ie8에서는 스크립트만 있을 경우에 submit이 안된다. 그래서 body에 추가해주기 위해 display:none을 해줬다.

그래서 기본적인 것만 간단히 만들어주는 스크립트를 작성하면 도움이 된다.

function createTag( tagName, className, srcOrText, altText){

var tag = document.createElement(tagName);

if(className != "") tag.className = className;

if(tagName == "img") tag.setAttribute("src", srcOrText);

else if(srcOrText != "") tag.innerHTML = srcOrText;

if(altText != "") tag.setAttribute("alt", altText);

return tag;

}