api 기능

우편검색 버튼을 누르면 주소를 검색할 수 있는 팝업창이 뜨고,

주소를 선택하면 주소 폼에 자동으로 주소가 입력된다.

 

 

주소 검색 기능을 직접 구현하려면 매우 힘들지만

기존 포털 사이트에서 서비스 중인 기능을 빌려온다.

 

 

 

 

body 영역에 작성한 입력양식

 

<form>
우편번호:<input type=text size=5 maxlength=5 id="join_zip1">		
<input type=button value="우편검색" onClick="openDaumPostcode()"><br>
주소:<input type=text size=60 id="join_addr1">
</form>

 

우편검색 버튼을 클릭하면 openDaumPostcode()함수를 실행하도록 되어 있는데,

head영역에 작성된 해당 함수이다.

 

<script>
	function post(){
	  window.open("","post",
		   	      "width=200,height=300,scrollbars=yes");
	}
</script>
<script src="http://dmaps.daum.net/map_js_init/postcode.v2.js"></script>
<script>
	function openDaumPostcode() {
		new daum.Postcode({
			oncomplete : function(data) {
				/* 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
				 우편번호와 주소 정보를 해당 필드에 넣고, 커서를 상세주소 필드로 이동한다.*/
				document.getElementById('join_zip1').value = data.zonecode;
				document.getElementById('join_addr1').value = data.address;
				
			}
		}).open();
	}
</script>

 

data라는 매개변수를 통해 팝업창에서 선택된 주소의 정보를

부모창의 우편번호와 주소 폼에 그대로 가져온다.