상세 컨텐츠

본문 제목

웹 입력폼에 주소검색버튼 넣기(다음 API사용)

기타정보

by 김일국 2014. 12. 9. 18:54

본문

요즘은 회원가입폼을 넣을때 주소입력을 아예 빼고, 이메일만 받다가, 최근에 주소입력이 필요해서 오픈API를 찾다가 다음API를 사용해 보고 최고로 간단한 구현이라는 것을 알게 되었다.

아래는 소스 코드 입니다.

<tr>
     <script src="http://dmaps.daum.net/map_js_init/postcode.js"></script>
     <script>
         function openDaumPostcode() {
             new daum.Postcode({
                 oncomplete: function(data) {
                     // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
                     // 우편번호와 주소 정보를 해당 필드에 넣고, 커서를 상세주소 필드로 이동한다.
       document.getElementById('PROFILE_TITLE').value = data.postcode1+data.postcode2+' '+data.address
                     //전체 주소에서 연결 번지 및 ()로 묶여 있는 부가정보를 제거하고자 할 경우,
                     //아래와 같은 정규식을 사용해도 된다. 정규식은 개발자의 목적에 맞게 수정해서 사용가능
                     //var addr = data.address.replace(/(\s|^)\(.+\)$|\S+~\S+/g, '');
                     //document.getElementById('addr').value = addr;
                     document.getElementById('PROFILE_TITLE').focus();
                 }
             }).open();
         }
     </script>
     <th><input type="button" onclick="openDaumPostcode()" value="주소찾기버튼" class="button default"></th>
     <td style="vertical-align:middle"><input type="text" size="30"  name="PROFILE_TITLE" id="PROFILE_TITLE" value="<?=$ROW['PROFILE_TITLE']?>" title="주소"  class="type-text" style="width:90%"/></td>
    </tr>

관련글 더보기

댓글 영역