87. (javascript/자바스크립트) 동적으로 form 폼 생성해 get, post 데이터 전송 실시

/* =========================== */

[ 개발 환경 설정 ]

​

개발 툴 : Edit++

개발 언어 : javascript

/* =========================== */

​

/* =========================== */

[소스 코드]

 

    <script>

    	/*
    	[JS 요약 설명]
    	1. window.onload : 웹페이지 로드 완료 상태를 나타냅니다
    	2. createElement : 특정 엘리먼트 요소를 생성합니다
    	3. setAttribute : 특정 속성을 지정합니다
    	4. appendChild : 특정 요소를 추가합니다
    	5. removeChild : 특정 요소를 삭제합니다
    	6. input : 입력 박스를 만듭니다 	
    	*/


    	/* [html 최초 로드 및 이벤트 상시 대기 실시] */
    	window.onload = function() {
    		console.log("");
    		console.log("[a_test_one] : [window onload] : [start]");
    		console.log("");
            
    		// [이벤트 함수 호출]
    		intentFormPage();
    	};



    	/* [이벤트 수행 함수] */
    	function intentFormPage(){
    		console.log("");
    		console.log("[intentDefaultPage] : [start]"); 
    		console.log("");


    		// [인텐트 이동할 페이지 및 데이터 선언 실시]
    		var url = "../WebProject/a_test_default.html?"; //전송 url    		
    		var idx = 1; //전송 데이터
    		var name = "twok"; //전송 데이터	

    		console.log("");
    		console.log("[intentDefaultPage] : [url] : " + url);     		
    		console.log("[intentDefaultPage] : [idx] : " + idx); 
    		console.log("[intentDefaultPage] : [name] : " + name); 
    		console.log("");


    		// [form 객체 동적 생성 실시]
    		var formLayout = document.createElement("form"); // 폼객체 생성
    		formLayout.setAttribute("charset", "UTF-8");
    		formLayout.setAttribute("method", "GET"); //GET, POST
    		formLayout.setAttribute("action", url);

    		var idxLayout = document.createElement("input"); // input 객체 생성
    		idxLayout.setAttribute("type", "text");
    		idxLayout.setAttribute("name", "idx");
    		idxLayout.setAttribute("value", idx);
    		formLayout.appendChild(idxLayout); // 폼에 추가 실시

    		var nameLayout = document.createElement("input"); // input 객체 생성
    		nameLayout.setAttribute("type", "text");
    		nameLayout.setAttribute("name", "name");
    		nameLayout.setAttribute("value", name);
    		formLayout.appendChild(nameLayout); // 폼에 추가 실시

    		document.body.appendChild(formLayout); //body에 폼 레이아웃 추가
    		formLayout.submit(); //실행 및 제출 실시
    		document.body.removeChild(formLayout); //body에서 폼 레이아웃 삭제  		 
    	};
    	
    </script>

/* =========================== */

​

/* =========================== */

[결과 출력]

​

/* =========================== */

​

/* =========================== */

[요약 설명]

​

/*

[JS 요약 설명]

1. window.onload : 웹페이지 로드 완료 상태를 나타냅니다

2. createElement : 특정 엘리먼트 요소를 생성합니다

3. setAttribute : 특정 속성을 지정합니다

4. appendChild : 특정 요소를 추가합니다

5. removeChild : 특정 요소를 삭제합니다

6. input : 입력 박스를 만듭니다

*/

/* =========================== */