[JS 응용] 회원가입 페이지 만들기 (팝업창)

전예원·2021년 11월 9일

CSS JavaScript html 회원가입

Java Script 공부

목록 보기

29/33

🖍 별도로 팝업창이 필요한 요소의 팝업창을 만들어 준다.

💡 주소검색, 주소검색결과, 아이디 중복검색, 아이디 중복검색 결과 페이지를 만들어보자!

파일 한개에 html, css, js 다 같이 작업

🔴 페이지 설계서

🟦 아이디 중복검색 : search_id.html
🔷 아이디 중복검색 결과 : result_id.html
🟧 주소 검색 : search_addr.html
🔶 주소 검색 결과 : result_addr.html

🟠 아이디 중복검색 - search_id.html

🟥 HTML

  <body>
    <form name="search_id_form" action="result_id.html" method="get" onsubmit="return check_id()">
      <fieldset>
        <legend>아이디 입력</legend>
        <p>
          <label for="">아이디</label>
          <input type="text" name="input_id" id="input_id" value="hong" />
          <button type="submit">검색</button>
        </p>
      </fieldset>
    </form>
  </body>

join.html에
<button type="button">아이디 중복확인</button> 이벤트 핸들러 추가
join.js에
function id_search() { window.open("search_id.html", "", "width=600, height=250, left=0, top=0"); } 추가 (form_check 함수 밖에)

🟡 아이디 중복검색 결과 - result_id.html

🟥 HTML

  <body>
    <p>
      입력하신 "hong"은 사용할 수 있는 아이디입니다.<br />
      <a href="#" onclick="return_id()">[사용하기]</a>
      <a href="#" onclick="history.back()">[다시 검색]</a>
    </p>
  </body>

🟨 JS

    <script type="text/javascript">
      function return_id() {
        opener.document.getElementById("u_id").value = "hong";
        window.close();
      }
    </script>

history.back()은 뒤로가기 버튼 같은 기능
'hong'이라는 값은 나중에 가변적인 값으로 변경하도록 한다.

🟢 주소 검색 - search_addr.html

🟥 HTML

<body>
    <form name="search_addr_form" action="result_addr.html" method="get">
        <fieldset>
            <legend>주소 검색</legend>
            <p>
                동 입력
                <input type="text" name="s_addr" id="s_addr" value="역삼동">
                <button type="submit">확인</button>
            </p>
        </fieldset>
    </form>
</body>

주소검색은 검사해야할 것이 너무 방대하다. 나중에 주소 API를 배우면 제대로 적용해보도록 하자!
지금은 그냥 틀 정도만 만들어보자!

🔵 주소 검색 결과 - result_addr.html

<body>
  <p>
    입력하신 <span class="able">"역삼동"</span> 검색 결과입니다.
  </p>
  <hr>
  <p>
    <a href="#" onclick="return_add('06253', '서울 강남구 강남대로 123 (푸르덴셜타워)')">
      06253 서울 강남구 강남대로 123 (푸르덴셜타워)
    </a>
  </p>
  <p>
    <a href="#" onclick="return_add('12345', '서울 강남구 강남대로 456 (동희빌딩)')">
      12345 서울 강남구 강남대로 456 (동희빌딩)
    </a>
  </p>
  <p>
    <a href="#" onclick="return_add('67890', '서울 강남구 강남대로 789 (유성타워)')">
      67890 서울 강남구 강남대로 789 (유성타워)
    </a>
  </p>
</body>

  <script type="text/javascript">
    function return_add(pCode, addr) {
      opener.document.getElementById("address").value = pCode;
      opener.document.getElementById("addr1").value = addr;
      window.close();
    };
  </script>

join.html에
<button type="button">주소검색</button> 이벤트 핸들러 추가
join.js에
function add_search() { window.open("search_addr.html", "", "width=600, height=250, left=0, top=0"); } 추가 (form_check 함수 밖에)