※ 회원가입 약관동의 만들기

• https://velog.io/@lth97/php-%ED%9A%8C%EC%9B%90%EA%B0%80%EC%9E%85-%EC%95%BD%EA%B4%80%EB%8F%99%EC%9D%98
  회원가입 약관동의 만들기 이어서 나머지 스크립트 작업을 해보겠습니다.
  못 보셨다면 위에 링크를 클릭해주세요.

checkBox 클릭 여부 확인

저번 시간에 약관동의 관련해서 간단하게 기본적인 구조를 잡아봤습니다.
이번 글에서는 해당 체크박스를 확인한 후 로그인페이지로 이동하는 간단한 구현을 해보겠습니다.

1. checkBox 버튼 식별하기

위 약관의 동의 하시겠습니까?

<input class="form-check-input" type="checkbox" value="" id="chk_member1">
        <label class="form-check-label" for="chk_member1">
          위 약관의 동의 하시겠습니까?
        </label>

위와 같이 input태그에 id값을 주어서 식별할 수 있는 이름을 부여해줍니다.

위 개인정보 취급방침에 동의하시겠습니까?

<input class="form-check-input" type="checkbox" value="" id="chk_member2">
        <label class="form-check-label" for="chk_member2">
          위 개인정보 취급방침에 동의하시겠습니까?
        </label>

같은 방법으로 개인정보 취급방침에도 똑같이 식별 가능한 id값을 부여합니다.

2. JavaScript - 동작 구현하기

※ 필자는 스크립트를 header부분에 넣어놨기 때문에 이를 위해서 DOMContentLoaded 사용했습니다.

1. 간단하게 js폴더를 만들어서 그 안에 동작을 구현할 member.js 파일을 만들어 줍니다.
   

2. 전체 코드는 아래와 같습니다.

document.addEventListener("DOMContentLoaded", () => {
  const btn_member = document.querySelector("#btn_member")

  btn_member.addEventListener("click", () => {
    const chk_member1 = document.querySelector("#chk_member1")
    const chk_member2 = document.querySelector("#chk_member2")

    if (chk_member1.checked !== true) {
      alert("회원 약관을 동의해주세요.")
      return false
    }
    if (chk_member2.checked !== true) {
      alert("개인정보 취급방침을 동의해주세요.")
      return false
    }

    location.href = "./member_input.php"
  })
})

2.1 위에서 언급했듯이 필자는 스크립트가 header에 있기때문에 DOMContentLoaded를 사용했습니다.

• DOMContentLoaded 를 사용하지 않으면 본문이 실행 되기도 전에 파일을 읽어서 제대로 기능을 수행할 수 없게됩니다. header 부분에 스크립트를 넣지 않으신 분들은 사용하지 않아도 됩니다.

2.2 회원가입 버튼을 다루기 위해서 다음과 같이 변하지 않을 변수 btn_member를 선언하고 회원가입 id값을 찾아서 넣어줍니다.

const btn_member = document.querySelector("#btn_member")

2.3 회원가입을 눌렀을 때 다음과 같이 수행합니다.

btn_member.addEventListener("click", () => {
    const chk_member1 = document.querySelector("#chk_member1")
    const chk_member2 = document.querySelector("#chk_member2")
    }

• addEventListener() 를 사용하여 btn_member 가 클릭되었을 때 chk_member1,chk_member2 변수에 각각의 체크박스 id값을 찾아서 넣어줍니다.

2.4 조건문을 사용하여 다음과 같은 기능을 수행합니다.

if (chk_member1.checked !== true) {
      alert("회원 약관을 동의해주세요.")
      return false
    }
if (chk_member2.checked !== true) {
      alert("개인정보 취급방침을 동의해주세요.")
      return false
    }

    location.href = "./member_input.php"

• if (chk_member1.checked !== true)

  위 개인정보 취급방침에 동의하시겠습니까?

위와 같이 체크박스에 체크표시가 있을 때 True(참) 값입니다.

첫번째 조건을 보면 chk_member1 변수가 확인(checked) 되었을 때 True(참) 값이 아니면 아래와 같이 해당 문장을 수행합니다.

if (chk_member1.checked !== true) {
      alert("회원 약관을 동의해주세요.")
      return false
    }

마찬가지로 아래 chk_member2 변수도 동일한 조건을 줍니다.

• if (chk_member2.checked !== true)

if (chk_member2.checked !== true) {
      alert("개인정보 취급방침을 동의해주세요.")
      return false
    }

3. 마지막으로 모든 동의를 얻었으면 회원가입 페이지로 이동합니다.
   회원가입 페이지는 다음시간에 올리겠습니다.
   

마무리

다음시간에는 회원가입 양식을 만들어 보겠습니다.

긴 글 봐주셔서 감사합니다.