<html>
<body>
<h6>주민등록상 주소</h6>
<div class="row">
<div class="col-2">우편번호</div>
<div class="col-10 d-flex">
<div>
<input type="text" class="form-control" id="zipCd" name="zipCd" readonly onclick="execDaumPostcode();" />
</div>
<div>
<button type="button" id="btnZip" name="btnZip" class="btn btn-light btn-sm" onclick="execDaumPostcode();">우편번호 찾기</button>
</div>
</div>
</div>
<div class="row">
<div class="col-2">기본주소</div>
<div class="col-10">
<input type="text" class="form-control" id="zipAddr" name="zipAddr" readonly onclick="execDaumPostcode();" />
</div>
</div>
<div class="row">
<div class="col-2">상세주소</div>
<div class="col-10">
<input type="text" class="form-control" id="detailAddr" name="detailAddr" />
</div>
</div>
</body>
</html><script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
function execDaumPostcode() {
new daum.Postcode({
oncomplete: function(data) {
// 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
// 도로명 주소의 노출 규칙에 따라 주소를 표시한다.
// 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
var roadAddr = data.roadAddress; // 도로명 주소 변수
var extraRoadAddr = ''; // 참고 항목 변수
// 건물명이 있는 경우 추가한다.
if(data.buildingName !== ''){
extraRoadAddr += (extraRoadAddr !== '' ? ', ' + data.buildingName : data.buildingName);
}
// 표시할 참고항목이 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
if(extraRoadAddr !== ''){
extraRoadAddr = ' (' + extraRoadAddr + ')';
}
// 우편번호와 주소 정보를 해당 필드에 넣는다.
$("#zipCd").val(data.zonecode);
$("#zipAddr").val(roadAddr);
// 참고항목 문자열이 있을 경우 해당 필드에 넣는다.
if(extraRoadAddr !== ''){
$("#detailAddr").val(extraRoadAddr);
}
else {
$("#detailAddr").val('');
}
}
}).open();
}
</script>'웹 싱니 > 그룹웨어 (22.02 ~ 22.07 )' 카테고리의 다른 글
| 명함그룹관리 페이지 (0) | 2022.05.18 |
|---|---|
| 비상연락망 페이지 (0) | 2022.05.17 |
| 통합검색 페이지 (0) | 2022.05.16 |
| 연차로직 설정 페이지 (0) | 2022.05.13 |
| 휴가코드설정 페이지 (0) | 2022.05.12 |