다음 카카오 주소검색 추가

추가

<script src="https://ssl.daumcdn.net/dmaps/map_js_init/postcode.v2.js"></script>

 

 

	<div class="mb-3">
	<div>
 		<label for="postNo" class="form-label">우편번호</label> 
 	</div>
 	<div>
		<input type="text" class="form-control"
			id="postNo" name="postNo" placeholder="우편번호를 입력해주세요"
			style="width:80%; float:left;">
			<input type="button" class="btn btn-success" value="우편번호검색"
			style="width:20%; float:right;" id="btnPostno">
	</div>
	</div>
	<div class="mb-3">
		<label for="cusAddr" class="form-label">주소
			</label> <input type="text" class="form-control"
			id="cusAddr" name="cusAddr" placeholder="주소를 입력해주세요">
	</div>
	<div class="mb-3">
		<label for="addrDet" class="form-label">상세주소
			</label> <input type="text" class="form-control"
			id="addrDet" name="addrDet" placeholder="상세번호를 입력해주세요">
	</div>

 

 

 

<script>
$(function(){
	$('#btnPostno').on('click',function(){
		new daum.Postcode({
			//다음창에서 검색이 완료되면 콜백함수에 의해 결과 데이터가 data객체로 들어옴
			oncomplete:function(data){
				//우편번호
				$('#postNo').val(data.zonecode);
				//주소
				$('#cusAddr').val(data.address);
				$('#addrDet').val(data.buildingName);
			}
		}).open();
	});	
});	
</script>

 

 

클릭시