프리랜서 웹디자이너 웹퍼블리셔RELATION

RELATION 로고

홈페이지 소스

[소스] javascript, jquery form 만들기

2018.12.03
북마크 [출처 이동]    작성자 정보
Form는  document 내 엘리먼트이기 때문에 필요한 경우 생성해서 사용 할수 있다. 
 
Javascript function으로 구부하는 형태
** FROM 만들기 함수
function makeForm( actionURL ) {
    var f = document.createElement("form");
 
    f.name = "frmHandle";
    f.action = actionURL;
    f.method = "post";
    f.target = "";
 
    return f;
}


** FORM element만들기 함수
function addData(name, value) {
 
    var elem = document.createElement("input");
 
    elem.setAttribute("type", "hidden");
    elem.setAttribute("name", name);
    elem.setAttribute("value", value);
 
    return elem;
}


** FORM을 만들고 element추가 후 form submit
window.onload = function() 
{
 var frm = makeForm("/login");
 frm.appendChid(addData("name","nextman"));
frm.submit();
}


Javascript 
출처 : https://ifuwanna.tistory.com/196
/* 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 newFrom = $('<form></form>');
 

 //set attribute(form)
 newForm.attr("name", "newFRom");
 newForm.attr("method", "post");
 newForm.attr("action", "http://relation.co.kr");
 newForm.attr("target", "_blank");


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


 //append form (to body)
 newFrom.append('body');


 //submit from
 newFrom.submit();

이 포스트 공유하기

전체목록