[Javascript/Jquery] form, input 동적 생성 및 submit

 

 

 

 

개요

 

 

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

 

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

 

 

 

 

 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();

 

 

 JQUERY

/* 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.submit();