개요

Form 태그 역시 document내 엘리먼트이기 때문에 필요할때 문서내에 없더라도 동적으로 Form 태그를 생성하여 action method 등 필요한 속성들을 설정하고 전송할 input 엘리먼트를 form안에 생성하여 submit하는 것이 가능합니다.  

순수 Javascript와 Jquery 각각 동적으로 form 을 생성하여 submit 하는 방법은 간략하게 소개합니다!

 Javascript 

<script type="text/javascript">
<!--
/* Javascript */
// create element (form)
var newForm = document.createElement('form');
// set attribute (form)
newForm.name = 'newForm';
newForm.method = 'post';
newForm.action = 'https://ifuwanna.tistory.com/196';
newForm.target = '_blank';

// create element (input)
var input1 = document.createElement('input');
var input2 = document.createElement('input');
// set attribute (input)
input1.setAttribute("type", "hidden");
input1.setAttribute("name", "data1");
input1.setAttribute("value", "value1");
input2.setAttribute("type", "hidden");
input2.setAttribute("name", "data2");
input2.setAttribute("value", "value2");

// append input (to form)
newForm.appendChild(input1);
newForm.appendChild(input2);

// append form (to body)
document.body.appendChild(newForm);

// submit form
newForm.submit();
//-->
</script>

 JQUERY

<script type="text/javascript">
<!--
/* JQUERY */
//create element (form)
var newForm = $('<form></form>');
//set attribute (form)
newForm.attr("name","newForm");
newForm.attr("method","post");
newForm.attr("action","https://ifuwanna.tistory.com/196");
newForm.attr("target","_blank");

// create element & set attribute (input)
newForm.append($('<input/>', {type: 'hidden', name: 'data1', value:'value1' }));
newForm.append($('<input/>', {type: 'hidden', name: 'data2', value:'value2' }));

// append form (to body)
newForm.appendTo('body');

// submit form
newForm.submt();
//-->
</script>