자바스크립트로 Form 인자값 얻기 (GET)

HTML 문서의 폼(Form)을 보내는 방법은 GET 방식과 POST 방식이 있습니다. URL에 데이터를 실어 보내는 GET 방식은 데이터를 자바스크립트로 얻을 수 있습니다.

자바스크립트로 GET 인자값을 얻는 함수 선언은 다음과 같습니다.

function receive_get_data(param) {
	var result = null, tmp = [];
	var items = window.location.search.substring(1).split("&");
	for (var i = 0; i < items.length; i++) {
		tmp = items[i].split("=");
		if (tmp[0] === param) result = decodeURIComponent(tmp[1]);
	}
	return result;
}

각 줄에 대해 설명하자면,

2번째 줄은 결과값을 돌려줄 변수와 인자를 나눌 임시 변수를 선언합니다.

3번째 줄은 URL에서 search 영역을 구하는 코드 window.location.search의 값을 가져와서 처리합니다. 여기서 substring(1) 함수를 사용하여 처음 1번째 글자는 버리는데, search 영역은 맨 앞의 ?표도 포함하기 때문에 이 ?표를 제거하기 위함입니다. 그리고 이를 다시 &표를 기준으로 분할된 문자열 배열을 만들고 이를 item 변수에 대입합니다.
※ [수정] substr 함수를 substring 함수로 수정합니다.

4번째 줄은 item 배열의 크기만큼 반복문을 수행합니다. 이 반복문 안에서 변수 tmp에 각 배열의 문자열을 =를 기준으로 나눠 대입합니다. 이러면 앞의 것(tmp[0])은 인자명이 되고 뒤의 것(tmp[1])은 그 인자명에 해당하는 인자값이 됩니다. 그리고 함수에 대입한(찾고자 하는) 인자명이 처리하는 인자명과 일치할 경우 그 인자명에 해당하는 인자값을 결과값 변수에 대입합니다.

마지막으로 결과값 변수를 리턴함으로써 함수를 종결합니다.

만약에, 데이터를 입력할 폼 문서의 내용이 다음과 같다고 할 때,

	<form action="데이터를 받아들일 문서 URL" method="get">
		<p>이름: <input type="text" name="username" /></p>
		<input type="submit" value="입력" />
	</form>

데이터를 받아들일 문서에는 다음과 같은 코드를 넣는다면,

	<p>Name: <span id="frm_username"></span></p>
	<script type="text/javascript">
		function receive_get_data(param) {
			var result = null, tmp = [];
			var items = window.location.search.substring(1).split("&");
			for (var i = 0; i < items.length; i++) {
				tmp = items[i].split("=");
				if (tmp[0] === param) result = decodeURIComponent(tmp[1]);
			}
			return result;
		}

		document.getElementById("frm_username").innerHTML = receive_get_data("username");
	</script>

입력할 문서로 가서 이름을 넣고 입력 버튼을 누르면 데이터를 받아들일 문서로 이동하면서 입력한 이름이 표시됩니다.

이 방법은 CGI 프로그램(PHP, ASP, JSP 등)이 없어도 가능합니다.