두 개의 스크립트 코드 중에서 하나만 실행이 됩니다.

매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!
두 개의 스크립트 코드 중에서 하나만 실행이 됩니다.

QA

두 개의 스크립트 코드 중에서 하나만 실행이 됩니다.

본문

안녕하세요. 항상 도움을 받고 있습니다. 감사합니다. 제가 로그인 폼에서 이메일과 인증번호를 입력해서 로그인이 되게 수정을 했습니다. 이메일을 입력하고 인증번호 발송 버튼을 클릭하면 값을 ajax 로 넘겨줘서 이메일을 비교해서 랜덤으로 인증번호를 생성해서 이메일으로 발송해야 합니다. 그리고 아래에 5분 동안 타이머를 재는 코드를 추가해주었습니다. 그런데 위의 이메일 검사하는 코드는 실행이 되지 않습니다. 왜 그런지 알려 주실 수 있으실까요?
 

<div class="form-group has-feedback">

      <label for="mb_email"><b>이메일</b><strong class="sound_only"> 필수</strong></label>

      <div class="input-group">

        <input type="text" name="mb_email" id="mb_email" value="" required class="form-control input-sm" size="20" maxLength="50">

        <span class="input-group-btn">

          <button type="button" class="btn btn-color" id="sendVerificationCode" onclick="sendVerificationCode()">인증번호 발송</button>

        </span>

      </div>

      <div id="errorText" class="text-danger"></div> <!-- 오류 메시지를 표시할 영역 -->

    </div>

 

    <div class="form-group has-feedback">

      <label for="login_email"><b>인증번호</b><strong class="sound_only"> 필수</strong></label>

      <div class="input-group">

        <input type="number" name="mb_certification_number" id="mb_certification_number" required class="form-control input-sm" size="20" maxLength="20">

        <span class="input-group-btn">

          <button type="submit" class="btn btn-color" onclick="checkVerificationCode()">인증번호 확인</button>

        </span>

      </div>

      <div id="codeErrorText" class="text-danger"></div> <!-- 오류 메시지를 표시할 영역 -->

      <span class="timer" id="timer"></span> <!-- 타이머 시간을 표시할 영역 -->

    </div>  

 

    <script>

     function sendVerificationCode() {

       var idInput = document.getElementById("login_id");

       var emailInput = document.getElementById("mb_email");

       var passwordInput = document.getElementById("login_pw");

       

       var idValue = idInput.value.trim();

       var emailValue = emailInput.value.trim();

       var passwordValue = passwordInput.value.trim();

 

       var errorText = document.getElementById("errorText");

 

       if (idValue === "" || passwordValue === "") {

        errorText.textContent = "아이디와 비밀번호를 입력해주세요.";

        return; // 아이디나 비밀번호가 입력되지 않으면 함수 종료

      } else if (emailValue === "") {    

         errorText.textContent = "이메일을 입력해주세요.";

         return; // 이메일이 입력되지 않으면 함수 종료

       }

 

       // AJAX 요청

       var xhr = new XMLHttpRequest();

       xhr.onreadystatechange = function() {

         if (xhr.readyState === XMLHttpRequest.DONE) {

           if (xhr.status === 200) {

             var response = xhr.responseText;

             var errorText = document.getElementById("errorText");

 

             if (response === "id_not_found") {

               errorText.textContent = "잘못된 아이디나 비밀번호입니다.";

             }else if (response === "email_not_found") {

               errorText.textContent = "이메일을 다시 입력해주세요.";

             } else if (response === "success") {

               errorText.textContent = "인증번호가 발송되었습니다.";

             } else {

               errorText.textContent = "오류가 발생했습니다. 다시 시도해주세요.";

             }

             

             console.log(response); // 수정된 부분

           }

         }

       };

 

       xhr.open("POST", "login_sendVerificationCode.php", true);

       xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

       xhr.send("login_id=" + encodeURIComponent(idValue) + "&mb_email=" + encodeURIComponent(emailValue));

 

       return false;

     }

    </script>

 

    <script>

     var timer = null;

     var isRunning = false;

 

     $("#sendVerificationCode").on("click", function() {

      var display = $("#timer");

      // 유효시간 설정

      var leftSec = 300;

 

      // 타이머 실행 시에 버튼 비활성화

      if (!isRunning) { // 타이머가 실행 중이지 않은 경우에만

       $("#sendVerificationCode").prop("disabled", true); // 버튼 비활성화

       startTimer(leftSec, display);

      }

     });

 

     function startTimer(count, display) {

      var minutes, seconds;

      timer = setInterval(function () {

       minutes = parseInt(count / 60, 10);

       seconds = parseInt(count % 60, 10);

 

       minutes = minutes < 10 ? "0" + minutes : minutes;

       seconds = seconds < 10 ? "0" + seconds : seconds;

 

       display.html(minutes + ":" + seconds);

 

       // 타이머 끝

       if (--count < 0) {

        clearInterval(timer);

        display.html("인증시간이 초과되었습니다.");

        $("#sendVerificationCode").prop("disabled", true); // 타이머 종료 후 버튼 비활성화

        isRunning = false;

       }

      }, 1000);

      isRunning = true;

     }

    </script>  

 

이 질문에 댓글 쓰기 :

답변 1

수정 해드렸습니다.

 

function sendVerificationCode(){
  var emailInput = document.getElementById("mb_email");
  
  var emailValue = emailInput.value.trim();

  var errorText = document.getElementById("errorText");

  if(emailValue === ""){
    errorText.textContent = "이메일을 입력해주세요.";
    return;
  }

  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function(){
    if(xhr.readyState === XMLHttpRequest.DONE){
      if(xhr.status === 200){
        var response = xhr.responseText;
        if(response === "email_not_found"){
          errorText.textContent = "이메일을 다시 입력해주세요.";
        }else if(response === "success"){
          errorText.textContent = "인증번호가 발송되었습니다.";
        }else {
          errorText.textContent = "오류가 발생했습니다. 다시 시도해주세요.";
        }
      }
    }
  };

  xhr.open("POST", "login_sendVerificationCode.php", true);
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  xhr.send("mb_email=" + encodeURIComponent(emailValue));

  return false;
}

답변을 작성하시기 전에 로그인 해주세요.
전체 124,489 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT