회원가입 페이지 만들기 - day3 (우편번호)

오늘은 회원가입시 우편번호를 검색해서 입력받는 형식을 추가해보려고 한다.

지난번에는 단순히 눌렀을때 버튼이 눌리는 정도만 되었다면

오늘은 우편번호를 눌렀을때 우편번호 검색창이 뜨고 주소를 입력할 수 있도록

구현하는것이 목표이다.

 

우편번호 및 주소입력은 카카오 주소검색 API를 이용했다.

 <p>우편번호: <input type="text" readonly id="sample6_postcode" name ="post_code">&nbsp
        <input type ="button" value = "우편번호찾기" onclick = "sample6_execDaumPostcode()"></p>
        <p>주소: <input type="text" id="sample6_address" name="address"></p>
        <p>상세주소: <input type="text" id="sample6_detailAddress" name="address1"></p>
        <p>전화번호: <input type="text" name="phone"></p>
        <p><input type="submit" value="완료">&nbsp&nbsp<input type="submit" value="취소"></p>

        <script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
        <script>
        function sample6_execDaumPostcode() {
                new daum.Postcode({
                oncomplete: function(data) {
                // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.

                // 각 주소의 노출 규칙에 따라 주소를 조합한다.
                // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
                var addr = ''; // 주소 변수
                var extraAddr = ''; // 참고항목 변수

                //사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.
                if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우
                    addr = data.roadAddress;
                } else { // 사용자가 지번 주소를 선택했을 경우(J)
                    addr = data.jibunAddress;
                }

 

참고 : https://postcode.map.daum.net/guide

Daum 우편번호 서비스

어떠한 이유에서인지 검색까지는 가능하지만 클릭 하였을때 데이터 입력이 안된다.

예제 내용을 중 data.userSelectedType 부분이 정상적으로 작동하지 않는것으로 유추된다.