개요
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();
'Program > Javascript, JQuery' 카테고리의 다른 글
[JQuery] 반복문 each break / continue 사용법 (1) | 2020.02.27 |
---|---|
[Javascript] submit 인코딩 캐릭터셋 변경, 한글 깨짐 처리( euc-kr / utf-8 ) (2) | 2019.11.13 |
[Javascript] 뒤로가기 막기, 뒤로가기 이벤트 제어 ( pushState / popstate ) (0) | 2019.11.08 |
[HTML/Javascript] 페이지내 원하는 위치로 이동 하기 ( scrollTo , scrollBy 차이 ) (0) | 2019.11.05 |
[Javascript] JSON 데이터 추가, 삭제 (add / delete) (1) | 2019.08.12 |